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都具有相同的高度/向下到页脚div。

我一直在寻找解决方案，但到目前为止还没有得到任何我期待的结果。我希望你们可以帮助我。

由于

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

Answer 2

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

一个非常新的好解决方案是新的flexbox layout（spec），它具有非常好的support nowadays并且适用于这种布局结构：Example。< / p>

另一个干净的解决方案是 display:table，它强制你的div表现得像桌子一样具有所有优点，例如相等的高度列，并且没有非语义标签混乱和不灵活结构的缺点。为此，请尝试以下方法：

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

See the example fiddle

Answer 3

您可以在此问题的接受答案中找到解决方案。

How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

Answer 4

我会尝试从菜单和bodycontent中删除浮动，将两者都设置为显示：inline-block;并将菜单#height设置为100％

未经测试，可能会失败

使两个并排div的高度相等

4 个答案: