用于"填充父级"的CSS？

Question

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

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

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

.filler {
    ?
}

Answer 1

根据您的内部项目,有各种方法.

如果它是块级元素(段落,div等),它将自动调整自身以填充容器宽度的100%.

如果它是一个内联元素,对你来说太糟糕了,它将不会被接受,width:100%直到你将它转换为块级元素:display:block.

浮动元素是一种特殊情况:它们只会跨越内部内容的宽度,即使它们是块级元素.他们需要width:100%.

绝对定位的元素甚至更难:它们需要width:100%,但容器也需要定位环境,例如.position:relative.

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

它不是.一个没有样式的`span`有`display:inline`,它的宽度不能设置.如果它使用`dipsplay:inline-block`进行样式设置,它将开始共享两个显示的属性:它与文本内容元素类似地出现在文档流中,但是它的尺寸可以像块元素一样被强制. (2认同)

Answer 2

你试过了width: 100%;吗？

Answer 3

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

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

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