我有页面结构为:
<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.parent { height: 300px };
然后你可以让孩子像这样伸展到全身高度。
div.child-right { height: 100% };
EDIT
下面是如何使用JavaScript实现的。
我可以看到公认的答案使用位置:绝对;而不是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
}
我找到了很多答案,但可能对我来说最好的解决方案是
.parent {
overflow: hidden;
}
.parent .floatLeft {
# your other styles
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
你可以在这里查看其他解决方案http://css-tricks.com/fluid-width-equal-height-columns/
我在评论区用了这个:
.parent { display: flex; float: left; border-top:2px solid black; width:635px; margin:10px 0px 0px 0px; padding:0px 20px 0px 20px; background-color: rgba(255,255,255,0.5); } .child-left { align-items: stretch; float: left; width:135px; padding:10px 10px 10px 0px; height:inherit; border-right:2px solid black; } .child-right { align-items: stretch; float: left; width:468px; padding:10px; } <div class="parent"> <div class="child-left">Short</div> <div class="child-right">Tall<br>Tall</div> </div>
您可以将child-right浮动到右边,但在这种情况下,我已经精确地计算了每个div的宽度。
对于父节点:
display: flex;
儿童:
align-items: stretch;
你应该添加一些前缀,检查caniuse。