我有页面结构为:
<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的增加而增加。
但问题是适合儿童的身高并没有增加。如何让它的高度等于它的父结点?
当前回答
父结点有身高吗?如果你像这样设置父结点高度。
div.parent { height: 300px };
然后你可以让孩子像这样伸展到全身高度。
div.child-right { height: 100% };
EDIT
下面是如何使用JavaScript实现的。
其他回答
请将父div设置为overflow: hidden 然后在儿童潜水你可以设置大量填充底部。例如 padding-bottom: 5000像素 然后margin-bottom: -5000px 然后所有子div都是父节点的高度。 当然,这不会工作,如果你试图把内容放在父div(外面的其他div是)
.parent{ border: 1px solid black; overflow: hidden; height: auto; } .child{ float: left; padding-bottom: 1500px; margin-bottom: -1500px; } .child1{ background: red; padding-right: 10px; } .child2{ background: green; padding-left: 10px; } <div class="parent"> <div class="child1 child"> One line text in child1 </div> <div class="child2 child"> Three line text in child2<br /> Three line text in child2<br /> Three line text in child2 </div> </div>
例如:http://jsfiddle.net/Tareqdhk/DAFEC/
我最近在我的网站上用jQuery做了这个。该代码计算最高div的高度,并将其他div设置为相同的高度。技巧如下:
http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/
我不相信高度:100%将工作,所以如果你不明确知道div高度,我不认为有一个纯粹的CSS解决方案。
父结点有身高吗?如果你像这样设置父结点高度。
div.parent { height: 300px };
然后你可以让孩子像这样伸展到全身高度。
div.child-right { height: 100% };
EDIT
下面是如何使用JavaScript实现的。
我找到了很多答案,但可能对我来说最好的解决方案是
.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/
如果你了解bootstrap,你可以通过使用'flex'属性轻松完成。你所需要做的就是将下面的css属性传递给父div
.homepageSection {
overflow: hidden;
height: auto;
display: flex;
flex-flow: row;
}
其中。homepagesection是我的父div。 现在在你的html中添加子div
<div class="abc col-md-6">
<div class="abc col-md-6">
abc是我的子div,你可以检查两个子div的高度相等,而不考虑边界,只要给子div边界