我有页面结构为:
<div class="parent">
<div class="child-left floatLeft">
</div>
<div class="child-right floatLeft">
</div>
</div>
现在,左子DIV将有更多的内容,因此父DIV的高度会随着子DIV的增加而增加。
但问题是适合儿童的身高并没有增加。如何让它的高度等于它的父结点?
我有页面结构为:
<div class="parent">
<div class="child-left floatLeft">
</div>
<div class="child-right floatLeft">
</div>
</div>
现在,左子DIV将有更多的内容,因此父DIV的高度会随着子DIV的增加而增加。
但问题是适合儿童的身高并没有增加。如何让它的高度等于它的父结点?
当前回答
我可以看到公认的答案使用位置:绝对;而不是float: left。如果你想使用float:留给下面的结构,
<div class="parent">
<div class="child-left floatLeft"></div>
<div class="child-right floatLeft"></div>
</div>
给出位置:自动;赋给父节点,以包含子节点的高度。
.parent {
position: auto;
}
.floatLeft {
float: left
}
其他回答
我是在一次实习面试中学会这个妙招的。最初的问题是如何确保三列中每个顶部组件的高度具有相同的高度,以显示所有可用的内容。基本上创建一个不可见的子组件,呈现最大可能的高度。
<div class="parent">
<div class="assert-height invisible">
<!-- content -->
</div>
<div class="shown">
<!-- content -->
</div>
</div>
<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>
<div class="child-right floatLeft" style="height:100%">
</div>
</div>
我使用内联样式只是为了表达想法。
对于父节点:
display: flex;
儿童:
align-items: stretch;
你应该添加一些前缀,检查caniuse。
父结点有身高吗?如果你像这样设置父结点高度。
div.parent { height: 300px };
然后你可以让孩子像这样伸展到全身高度。
div.child-right { height: 100% };
EDIT
下面是如何使用JavaScript实现的。
我最近在我的网站上用jQuery做了这个。该代码计算最高div的高度,并将其他div设置为相同的高度。技巧如下:
http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/
我不相信高度:100%将工作,所以如果你不明确知道div高度,我不认为有一个纯粹的CSS解决方案。