使两个并排的 div 的高度相等

Question

所以我来自设计网页表格，想尝试一下div和CSS，希望你能帮助我。

情况：

目前我有以下的div结构：

<div id="header">
    <div id="headline">

    </div>
    <div id="login">

    </div>
</div>
<div style="clear: both;" />
<div id="mainbody" style="border-top: black solid 2px;">
    <div id="menu">

    </div>
    <div id="bodyContent">

    </div>
</div>
<div style="clear: both;"></div>
<div id="footer"></div>

我有以下的CSS代码：

#mainbody
{
    background-color: white;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#menu
{
    width: 137px;
    float: left;
    background-color: #EEEEEE;
    padding-left: 3px;
}

#bodyContent
{
    float: right;
    width: 850px;
    background-color: white;
    padding: 5px;
}

#headline
{
    width: 693px;
    height: 75px;
    float: left;
    background-color: white;
    font-family: monospace;
    font-size: 48pt;
    font-weight: bold;
    padding-left: 7px;
}

#login
{
    height: 75px;
    width: 300px;
    float: right;
    background-color: white;
}

#header
{
    background-color: white;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#footer
{
    border-top: black solid medium;
    width: 1000px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
}  

问题：

页面中的“menu”和“bodyContent” div具有不同的高度。因此，如果我有一个相当大的“bodyContent”页面，“menu” div将无法一直延伸到“footer” div。如果“menu” div比“bodyContent” div更高，则存在相同的问题。

我希望“menu”和“bodyContent” div都具有相同的高度/延伸到footer div。

我尝试寻找解决方案，但迄今为止没有得到我期望的结果。我希望你们能帮助我。

谢谢

- evilfish

Answer 1

尝试这个：

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>​

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}​

示例： http://jsfiddle.net/VdfJh/

并检查此链接：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

这些链接提供了关于如何使用CSS创建等高列的技术。

- MCSI

Answer 2

根据您需要支持的浏览器，您可以尝试不同的方法。

一个非常新的和好的解决方案是新的flexbox layout (spec)，它在现在有很好的support nowadays ，旨在用于这种布局结构：Example。

另一个简洁的解决方案是display:table，它强制您的 div 行为像表格一样具有所有优点，例如等高列，而没有非语义化标记混杂和不灵活的结构。要实现这个目标，请尝试以下操作：

parent{
   display:table;
}
.children{
   display:table-cell;
}

查看示例fiddle

- Christoph

Answer 3

我会尝试从菜单和正文内容中移除浮动，将两者都设置为display: inline-block; 并将menu#height设置为100%

未经测试，可能会失败

- stefan bachert