【发布时间】：2012-05-09 16:03:18
【问题描述】：
我的中心与 1060 像素宽度对齐。在这里面，我有两个不同的背景颜色/图像和宽度分别为 260 像素和 800 像素的 div。 现在我需要使两个子 div 的高度相同，而不管它们里面的内容如何。如果“child1”的内容很大，我们需要向下滚动浏览器才能看到它，而“child2”的内容较少，那么“child2”的高度也应该与“child1”相匹配。另一方面，如果“child1”和“child2”的内容都较少，并且不产生浏览器滚动，那么两者都应该占据浏览器窗口的高度。代码 sn-p 如下所示。
<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？
【问题讨论】：
-
你检查过这个问题的解决方案了吗？ --> stackoverflow.com/questions/873781/…
-
感谢您的回复。我看过这个网站，但我的网站图像很重，我需要一个 CSS 解决方案。请帮忙。