使两个并排 div 的高度相等

所以我来自表格设计网页，我想尝试一下 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;
}  

Problem:

“menu”和“bodyContent”div 在我的页面中具有不同的高度。因此，如果我有一个相当大的“bodyContent”页面，“菜单”div 将不会一直向下到“页脚”div。如果“menu”div 高于“bodyContent”div，也会存在同样的问题。

我希望“menu”和“bodyContent”div 具有相同的高度/向下到页脚div。

我曾尝试寻找解决方案，但到目前为止还没有得到我期望的任何结果。我希望你们能在这方面帮助我。

Thanks

尝试这个：

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://jsfiddle.net/VdfJh/

并检查此链接：

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