I want my container div to get the height of max of its children's height. without knowing what height the child div
s are going to have. I was trying out on JSFiddle. The container div
is on red. which is not showing up. Why?
我想要我的容器div得到它的子高度的最大值。不知道孩子的身高是多少。我在试验JSFiddle。容器div是红色的。没有出现。为什么?
5 个解决方案
#1
265
Add the following property:
添加以下属性:
.c{
...
overflow: hidden;
}
This will force the container to respect the height of all elements within it, regardless of floating elements.
http://jsfiddle.net/gtdfY/3/
这将迫使容器尊重其中所有元素的高度,而不考虑浮动元素。http://jsfiddle.net/gtdfY/3/
UPDATE
Recently, I was working on a project that required this trick, but needed to allow overflow to show, so instead, you can use a pseudo-element to clear your floats, effectively achieving the same effect while allowing overflow on all elements.
最近,我正在研究一个需要这个技巧的项目,但是需要允许溢出来显示,所以,您可以使用一个伪元素来清除浮动,有效地实现相同的效果,同时允许溢出所有元素。
.c:after{
clear: both;
content: "";
display: block;
}
http://jsfiddle.net/gtdfY/368/
http://jsfiddle.net/gtdfY/368/
#2
26
You are floating the children which means they "float" in front of the container. In order to take the correct height, you must "clear" the float
你在浮动孩子们,这意味着他们“漂浮”在容器的前面。为了得到正确的高度,你必须“清除”浮动
The div style="clear: both" clears the floating an gives the correct height to the container. see http://css.maxdesign.com.au/floatutorial/clear.htm for more info on floats.
div样式="clear: both"清除浮动an,为容器提供正确的高度。有关浮点数的更多信息,请参见http://css.maxdesign.com.au/floatutorial/clear.htm。
eg.
如。
<div class="c">
<div class="l">
</div>
<div class="m">
World
</div>
<div style="clear: both" />
</div>
#3
16
It is not that easier?
这不是更容易吗?
.c {
overflow: auto;
}
#4
4
Try inserting this clearing div before the last </div>
尝试在最后一个之前插入这个清理div
<div style="clear: both; line-height: 0;"> </div>
< div风格= "明确:;行高:0;" >,< / div >
#5
1
The best and the most bulletproof solution is to add ::before
and ::after
pseudoelements to the container. So if you have for example a list like:
最好和最防弹的解决方案是在容器中添加:before和:after赝元素。如果你有一个列表,比如
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
</ul>
And every elements in the list has float:left
property, then you should add to your css:
列表中的每个元素都有float:left属性,那么你应该添加到css中:
.clearfix::after, .clearfix::before {
content: '';
clear: both;
display: table;
}
Or you could try display:inline-block;
property, then you don't need to add any clearfix.
或者你可以试试display:inline-block;属性,然后不需要添加任何clearfix。
#1
265
Add the following property:
添加以下属性:
.c{
...
overflow: hidden;
}
This will force the container to respect the height of all elements within it, regardless of floating elements.
http://jsfiddle.net/gtdfY/3/
这将迫使容器尊重其中所有元素的高度,而不考虑浮动元素。http://jsfiddle.net/gtdfY/3/
UPDATE
Recently, I was working on a project that required this trick, but needed to allow overflow to show, so instead, you can use a pseudo-element to clear your floats, effectively achieving the same effect while allowing overflow on all elements.
最近,我正在研究一个需要这个技巧的项目,但是需要允许溢出来显示,所以,您可以使用一个伪元素来清除浮动,有效地实现相同的效果,同时允许溢出所有元素。
.c:after{
clear: both;
content: "";
display: block;
}
http://jsfiddle.net/gtdfY/368/
http://jsfiddle.net/gtdfY/368/
#2
26
You are floating the children which means they "float" in front of the container. In order to take the correct height, you must "clear" the float
你在浮动孩子们,这意味着他们“漂浮”在容器的前面。为了得到正确的高度,你必须“清除”浮动
The div style="clear: both" clears the floating an gives the correct height to the container. see http://css.maxdesign.com.au/floatutorial/clear.htm for more info on floats.
div样式="clear: both"清除浮动an,为容器提供正确的高度。有关浮点数的更多信息,请参见http://css.maxdesign.com.au/floatutorial/clear.htm。
eg.
如。
<div class="c">
<div class="l">
</div>
<div class="m">
World
</div>
<div style="clear: both" />
</div>
#3
16
It is not that easier?
这不是更容易吗?
.c {
overflow: auto;
}
#4
4
Try inserting this clearing div before the last </div>
尝试在最后一个之前插入这个清理div
<div style="clear: both; line-height: 0;"> </div>
< div风格= "明确:;行高:0;" >,< / div >
#5
1
The best and the most bulletproof solution is to add ::before
and ::after
pseudoelements to the container. So if you have for example a list like:
最好和最防弹的解决方案是在容器中添加:before和:after赝元素。如果你有一个列表,比如
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
</ul>
And every elements in the list has float:left
property, then you should add to your css:
列表中的每个元素都有float:left属性,那么你应该添加到css中:
.clearfix::after, .clearfix::before {
content: '';
clear: both;
display: table;
}
Or you could try display:inline-block;
property, then you don't need to add any clearfix.
或者你可以试试display:inline-block;属性,然后不需要添加任何clearfix。