我有页面结构为:
<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.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解决方案。
我是在一次实习面试中学会这个妙招的。最初的问题是如何确保三列中每个顶部组件的高度具有相同的高度，以显示所有可用的内容。基本上创建一个不可见的子组件，呈现最大可能的高度。
<div class="parent">
<div class="assert-height invisible">
<!-- content -->
</div>
<div class="shown">
<!-- content -->
</div>
</div>
我在评论区用了这个:
.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的宽度。
对于父元素，添加以下属性:
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
然后是。child-right这些:
.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
在这里可以找到更多关于CSS示例的详细结果，在这里可以找到关于等高列的更多信息。
