当前位置: 首页 > 面试题库 >

有没有办法使用CSS使子DIV的宽度大于父DIV的宽度?

相旭
2023-03-14
问题内容

有没有一种方法可以在比其父对象更宽的父容器DIV中包含子DIV 。子DIV必须与浏览器视口的宽度相同。

子DIV 必须保留为父div的子。我知道我可以在子div上设置任意的负边距以使其更宽,但是我不知道如何从根本上使它成为浏览器宽度的100%。

我知道我可以这样做:

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

但是我需要孩子的宽度与动态浏览器的宽度相同。

Update

感谢您的回答,到目前为止,似乎最接近的答案是将子DIV位置设置为绝对位置,并将left和right属性设置为0。

我的下一个问题是父级具有position:relative,这意味着left和right属性仍然相对于父级div而不是浏览器,


问题答案:

使用绝对定位

.child-div {
    position:absolute;
    left:0;
    right:0;
}


 类似资料:
  • 问题内容: 我正在尝试使图像(动态放置,不受尺寸限制)的宽度与其父div一样宽,但前提是该宽度不比其自身的宽度100%宽。我已经尝试过,但无济于事: 这些图像中的许多图像都比其父div宽得多,这就是为什么我希望它们进行相应调整的原因,但是当其中弹出一个小图像并放大到超出其正常尺寸时,它看起来确实很糟糕。有什么办法吗? 问题答案: 仅指定一个,就应该这样做。

  • 问题内容: 我正在尝试给div(位置:固定)的宽度为100%(与其父div有关)。但是我有一些问题 编辑: **第一个问题是通过使用继承解决的,但它仍然无法正常工作。我认为问题在于我正在使用多个采用100%/继承宽度的div。 福克斯的例子 和html 问题似乎是 固定元素始终采用window / document的宽度 。有人知道如何解决吗? 我无法使用我的固定元素进行固定,因为我正在使用jSc

  • CSS: 也就是立场:绝对;使它不同于其他类似的问题,我觉得。目前我可以隐藏滚动条,但当我调整浏览器窗口的大小时,你可以看到部分滚动条伸出来。

  • 问题内容: 我有一个容器宽度为100%的页面,因此它是屏幕的整个宽度,我在网格结构中有几个DIV,它们都具有浮动:保留在它们上,没有设置宽度,仅留有10px的空白。 是否有一种使用CSS或jQuery的方法来使div填充整个宽度并调整其自身以适应间隙,因此边距会根据屏幕尺寸而变化。 问题答案: 在此线程中查看三十点的答案,以获得不带JavaScript的纯CSS / HTML解决方案,该解决方案可

  • 问题内容: 我想创建一个div可以随窗口宽度变化而改变其宽度/高度的。 是否有任何CSS3规则可以允许高度根据宽度而改变,同时保持其长宽比? 我知道我可以通过JavaScript来做到这一点,但我宁愿只使用CSS。 问题答案: 只需使用百分比值创建包装器,如下所示: 它将导致高度等于其容器宽度的75%(长宽比为4:3)。 这取决于以下事实: 相对于生成的盒子的包含块的宽度计算百分比(来源:w3.o

  • 问题内容: 假设一个父div有两个子div,一个包含文本,另一个包含已知(但可变)宽度和高度的图像。 我想要 第一个子(包含图像)的div的宽度缩小以适合图像的宽度(我可以这样做) 父div(未指定宽度)缩小以适合包含图像的div的宽度(也可以) 包含文本的第二个子div(也具有未指定的宽度)以匹配父div的宽度,而不管其包含的文本数量如何(这是棘手的地方)。 我有一个工作版本可以满足我的要求,