CSS容器div没有变高

116

我希望我的容器div获得其子代高度的最大值。不知道孩子div的身高。我正在尝试使用JSFiddle。容器div为红色。没有出现。为什么？

css css-float liquid-layout

282

添加以下属性：

.c{
    ...
    overflow: hidden;
}

这将迫使容器尊重其中所有元素的高度，而不考虑浮动元素。
http://jsfiddle.net/gtdfY/3/

更新

最近，我正在一个需要此技巧但需要允许溢出显示的项目中工作，因此，您可以使用伪元素清除浮动，从而有效地实现相同的效果，同时允许所有元素上的溢出。

.c:after{
    clear: both;
    content: "";
    display: block;
}

— 夜猫
source

8

基本上，添加此属性会强制外部框忽略浮动容器具有的规则（对于容器而言，浮动容器的高度未计算在内），并将其应用于整个背景图。

— Nightfirecat，

4

哇，我当时想：“什么？那行不通。” 但是我会被吓死。我完全认为这不会正常工作。谢谢

— 剑联2013年

1

这真的不是很hacky吗？对我而言，它无法达到溢出的目的。我不明白为什么这是正确且最受推崇的答案。

— 安德鲁·威尔

3

@AndrewWeir我承认，直到现在，我还不确定为什么这种扩展容器的方法可以正确考虑其大小的浮点数的作用。据到几个来源，似乎这会导致一个元素来改变它的渲染模式，从可视光线溢出到不这样做，并在这样做，这股势力的元素来禁止溢出。

— 夜火猫”，

2

第一种方法，使用溢出，对我有用。ALSO的第二种方法可以工作，并且在将来发生溢出的情况下，风险似乎也较小。我只希望可以投票两次。

— Tyler Collier 2013年

28

您正在漂浮孩子，这意味着他们“漂浮”在容器的前面。为了达到正确的高度，您必须“清除”浮子

div style =“ clear：both”清除浮点，并为容器提供正确的高度。有关浮动的更多信息，请参见http://css.maxdesign.com.au/floatutorial/clear.htm。

例如。

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

— 约里
source

这很清楚：两者都；这似乎是解决容器高度的适当方法，因为问题是漂浮的孩子。因此，这种方法似乎比溢出更好：以上之一。

— 罗尼·德普

感谢@Yoeri分享这个简单的解决方案。竖起大拇指！我一直在为我的新设计寻找相同的解决方案，因为我上一次设计Web布局至今已经将近6年，因为我只专注于PHP开发角度而非设计方面。

— 罗尼·德普 Ronnie Depp）2013年

20

这不是那么容易吗？

.c {
    overflow: auto;
}

— 安东尼奥·罗梅罗·奥卡
source

是的，它是：D。谢谢

— Alauddin Ahmed

4

尝试在最后一个插入之前插入此清除div </div>

<div style="clear: both; line-height: 0;"> </div>

— 李
source

3

最好和最防弹的解决方案是向容器添加::before和::after伪元素。因此，如果您有一个类似的列表：

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

并且列表中的每个元素都有float:left属性，那么您应该将其添加到CSS中：

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

或者您可以尝试使用display:inline-block;属性，则无需添加任何clearfix。

— ata田
source