Question

我正在尝试使用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页面高度的百分比。

Answer 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/

Answer 2

尝试将此添加到容器中：

position: relative;

然后将其添加到左栏：

position: absolute;
top: 0;
bottom: 0;

Answer 3

将左侧栏设置为position：relative;

Answer 4

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

如果container的高度为500px，则减去topbar（85）和container边距（85）的高度，以达到330px的高度。由于container使用min-height，因此min-height使用leftbar也可以允许它在需要时展开容器。您还应将leftbar的位置更改为相对，以正确呈现container的高度。

底线：

#leftbar {
position: relative;
min-height: 330px;
}

父div的Div填充高度？

4 个答案: