Question

我在DOM上有一个项目，我只想填写其父级的宽度，无论它是什么：

<div width="800">
    <div class="filler"></div>
</div>

如何在CSS中指定filler类与其父级的宽度匹配？

.filler {
    ?
}

Answer 1

根据您的内部项目，有各种方法。

如果它是块级元素（段落，div等），它将自动调整自身以填充容器宽度的100％。

如果它是一个内联元素，对你来说太糟糕了，在将它转换为块级元素之前，它将不会接受width:100%：{/ 1}}。

浮动元素是一种特殊情况：它们只会跨越内部内容的宽度，即使它们是块级元素。他们需要display:block。

绝对定位的元素甚至更难：它们需要width:100%，但容器也需要定位上下文，例如。 width:100%。

所有四种情况的例子：http://jsfiddle.net/dD7E4/

Answer 2

您是否尝试过：width: 100%;？

Answer 3

div是一个块元素，默认填充其父元素如果不是，您可能使用float:left或float:right或display:inline，或者您的父母不是800px。
（也许你应该尝试style="width:800px"或width="800px"而不是width="800"）
我通常会设置一个彩色边框来看它是如何工作的。

Answer 4

除非阻止它们，否则div和p等块级元素将始终填充其容器的整个宽度。如果您有一个内联元素，例如span或a，则可以将其设置为display: block，以将其转换为块级元素，但这也会产生换行符之前和之后。

Answer 5

如果内部元素不是 div 并且有内边距或边距，flexbox 可能是最好的解决方案：

<div class="container">
    <div class="filler"></div>
</div>

.container {
    display: flex;
}
.filler {
    flex-grow: 1;
}

另见this answer about how to fill remaining vertical space。

Answer 6

默认情况下，它会填充其父元素的宽度，因为 div 是一个块元素。

用于“填充父级”的CSS？

6 个答案: