0

我有一个与 1060px 宽度对齐的中心。在这里面，我有两个不同的背景颜色/图像和宽度分别为 260 像素和 800 像素的 div。现在我需要使两个子 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？

4

1 回答 1

0

您可以使用 'display:table-cell' 。

http://jsfiddle.net/sWHKs/

于 2012-05-09T08:03:18.597 回答