0

我试图让一个 div 来填充一个 div 的剩余高度。这是我的 HTML 和 CSS：

CSS：

* {
    padding: 0px;
    margin: 0px;
}
#container {
    margin: 85px auto 0px auto;
    background: #444444;
    min-height: 500px;
    width: 900px;
}
#topbar {
    width: 900px;
    height: 85px;
    background: #555555;
}
#leftbar {
    width: 250px;
    height: 100%;   
    background: #666666;
}

HTML：

<div id="container">
    <div id="topbar">
    </div>
    <div id="leftbar">
    </div>
</div>

我希望leftbar填充底部topbar和底部之间的高度container，但它正在拉伸container，因此它leftbar是页面高度的 100%。

4

4 回答 4

1

您可以使用绝对定位拉伸leftbar并设置top/bottom值：

* {
    padding: 0px;
    margin: 0px;
}
#container {
    position: relative;
    margin: 85px auto 0px auto;
    background: #444444;
    min-height: 500px;
    width: 900px;
}
#topbar {
    width: 900px;
    height: 85px;
    background: #555555;
}
#leftbar {
    position: absolute;
    top: 85px;
    bottom: 0;
    width: 250px;
    background: red;
}

小提琴：http: //jsfiddle.net/robertp/CQ7pf/

于 2013-06-24T19:09:08.783 回答
1

尝试将其添加到容器中：

position: relative;

然后将其添加到leftbar：

position: absolute;
top: 0;
bottom: 0;
于 2013-06-24T19:12:32.897 回答
0

将左栏设置为 position: relative;

于 2013-06-24T19:16:48.723 回答
0

所以leftbar应该是container'高度减去topbar'高度。由于container和topbar具有硬编码的高度值，因此leftbar也必须进行硬编码。它不是世界上最漂亮的东西，但它比 JavaScript 更简单。

如果container是 500px 的高度，减去topbar(85) 的高度和container的边距 (85) 得到 330px 的高度。既然container使用min-height，使用min-heightforleftbar也允许它在需要时拉伸容器。您还应该将leftbar' 位置更改为相对以正确呈现高度container。

底线：

#leftbar {
position: relative;
min-height: 330px;
}
于 2013-06-24T19:25:19.200 回答