我尝试过 CSS 并发现了一个问题。根据我的代码( http://jsbin.com/daguviluwo/1/edit?html,output )，我想创建两个带有“float:left”的盒子，它们会自动将它们的高度调整为相等(=最大高度)。因此，我创建了他们的父级(id =“content”)。我认为 parent 的高度应该根据其 child 的最大高度进行调整(但事实并非如此!)。然后，具有属性“height:100%”(红色框)的子级的高度应与该父级相同，并且与最大高度的子级(绿色框)相同。然而，它不起作用。
最佳答案
只需将 inline-flex 的 display 属性值添加到:
#content#leftcontent#rightcontent
还将 height:auto 的 size 属性值添加到:
#leftcontent#rightcontent
#content {
background-color: grey;
height: 500px;
width: auto;
display: inline-flex;
}
#leftcontent {
height: auto;
background-color: red;
display: inline-flex;
}
#rightcontent {
background-color: green;
height: auto;
display: inline-flex;
}<body>
<div id="content">
<div id="leftcontent">
<ul>
<li>The height of this div is set to 100</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div>
<div id="rightcontent">
<h2>This is my first header.</h2>
<p>Content.</p>
<h2>This is my second header.</h2>
<p>Content 2.</p>
</div>
</div>
</body>注意:通过这种方法，您可以从左/右元素 CSS 中删除 float
关于html - 设置高度100%但css div不展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29033666/