Question

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

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

以下是我的CSS（小提琴：http://jsfiddle.net/adityajain/fh849/1/），问题是height的{{1}}风格

div#verticalDiv2

如果vertical-div2的动态内容非常大，我不希望垂直滚动显示在container-Div中，但是在vertical-div2中

Answer 1

您可以position:absolute;使用#vertivalDiv2 top:45px; bottom:0; position:relative;。别忘了在容器上设置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; }。

<强> DEMO

CSS：

{{1}}

Answer 2

使用已知高度，您可以切换框模型并使用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;
}

Answer 3

最灵活的解决方案是使用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;
}

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

3 个答案:

Demo Fiddle