Html CSS:div height可精确填充容器div的剩余高度

我在一个容器div中有两个div

Div1

和

Div2

Div1

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

下面是我的CSS（fiddle:），问题是

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中，您可以使用
位置：绝对在
#vertivalDiv2
上，顶部为45px；底部：0。不要忘记设置
位置：相对


CSS:

在已知高度的情况下，您可以切换箱子型号，并使用
绝对定位和
填充
：

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;
}

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

HTML

我会这样做的<代码>+1
。谢谢！为什么我没有想到这一点您的主容器仍保留在文档流中，如果使其浮动，内容可以添加到后面或旁边。谢谢，我不知道框大小属性。
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;
}

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

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;
}