Question

我的中心对齐宽度为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？

Answer 1

你可以使用＆＃39; display：table-cell＆＃39; 。

http://jsfiddle.net/sWHKs/

如何使两个div的高度相同，无论其内容如何？

1 个答案: