CSS：div高度精确填充容器div的剩余高度

Question

我在容器 div 中有 2 个 div Div1 和 Div2。

Div1是一个固定高度为45px的菜单栏，容器div的高度为100%。 如何确保 div2 的高度恰好足以垂直填充剩余的容器，并且 div2 中的任何额外动态内容都会在其中创建垂直滚动。

下面是我的 CSS（小提琴：http://jsfiddle.net/adityajain/fh849/1/），问题是 div#verticalDiv2 的 height 样式

div#main-container {
   height:100%;
   overflow:hidden;
}
div#verticalDiv1{
   height:45px;
   width:100%;
   color: #EEE;
   background-color:#222;
}
div#vertivalDiv2{
   height:90%; //WHAT here ???
   width:100%;
   color: #222;
   background-color:#DDD;
   overflow-y:auto;
}

万一到vertical-div2的动态内容很大，我不希望垂直滚动出现在container-Div中，而是出现在vertical-div2中

Answer 1

您可以在 #vertivalDiv2 上使用 position:absolute; 和 top:45px; bottom:0; 。不要忘记在容器上设置position:relative;。

DEMO

CSS：

html, body{
    height:100%;
}
#main-container {
    height:100%;
    overflow:hidden;
    border:1px red solid;
    position:relative;
}
#verticalDiv1{
    height:45px;
    width:100%;
    color: #EEE;
    background-color:#222;
}
#vertivalDiv2{
    width:100%;
    color: #222;
    background-color:#DDD;
    overflow-y:auto;
    position:absolute;
    top:45px;
    bottom:0;
}
#vertivalDiv2 .item{
    padding:15px;
    border:1px #333 solid;
}

Answer 2

最灵活的解决方案是使用 CSS display:table - 这样做的好处是它也适用于未知高度，例如，如果您的菜单的高度发生变化。

Demo Fiddle

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>head: div 1, fixed height.</div>
    </div>
    <div class='row'>
        <div class='cell'>
            <div id="list">
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
            </div>
        </div>
    </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    table-layout:fixed;
    height:100%;
    width:100%;
    max-height:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
}
.row:first-of-type >.cell {
    color: #EEE;
    background-color:#222;
    height:45px; /* doesnt matter what this is- the layout will flexibly adjust */
}
.row:last-of-type >.cell {
    color: #222;
    background-color:#DDD;
}
#list {
    height:100%;
    overflow-y:auto;
}

Answer 3

在已知高度的情况下，可以切换box-model并使用absolute定位和padding：DEMO

html, body {
    height:100%;
    margin:0;
    padding:0.25em;
    box-sizing:border-box;/* includes padding and borders in 100% height/width */
}
#main-container {
    padding-top:45px;
    box-sizing:border-box;/* includes padding and borders in 100% height/width */
    height:100%;
    overflow:hidden;
    border:1px red solid;
    position:relative;
}
#verticalDiv1 {
    height:45px;
    width:100%;
    color: #EEE;
    background-color:#222;
    position:absolute;/* it will stand in the padding area of its'parent */
    top:0;
    left:0;
    right:0;
}
#vertivalDiv2 {
    height:100%;
    color: #222;
    background-color:#DDD;
    overflow-y:auto;
}
#vertivalDiv2 .item {
    padding:15px;
    border:1px #333 solid;
}