我有一个与 1060 像素宽度对齐的中心。在此范围内，我还有两个 div，分别具有不同的背景颜色/图像和 260px 和 800px 的宽度。 现在我需要使两个子 div 的高度相同，而不管它们里面的内容如何。如果“child1”的内容很大，我们需要向下滚动浏览器才能看到它，而“child2”的内容较少，那么“child2”也应该扩展高度以与“child1”匹配。另一方面，如果“child1”和“child2”的内容都较少并且不产生浏览器滚动，那么两者都应该占据浏览器窗口的高度。下面给出了代码片段。
<html>
<head>
<style type="text/css">
* { margin:0; padding:0; }
.parent { clear:both; margin:auto; width:1060px; }
.child1 { background-color:#999999; float:left; width:260px; }
.child2 { background-color:#99CC00; float:left; width:800px; }
.child1a, child2a { float:left; width:100%; }
.child2a { border-bottom:1px solid #000000; height:500px; }
</style>
</head>
<body>
<div class="parent">
<div class="child1">
<div class="child1a">1</div>
<div class="child1a">2</div>
<div class="child1a">3</div>
</div>
<div class="child2">
<div class="child2a">1</div>
<div class="child2a">2</div>
<div class="child2a">3</div>
</div>
</div>
</body>
</html>
是否可以只使用 CSS 来解决，还是需要使用 JavaScript？
最佳答案
您可以使用 'display:table-cell' 。
关于css - 如何使两个 div 的高度相同，而不管其内容如何？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10511860/