css - 在页眉和页脚之间拉伸(stretch) div

Question

我遇到的任务看起来很标准:我有一个固定高度的容器，里面有 3 个 div。我希望第二个 div 在顶部和底部 div 之间拉伸(stretch)。当第二个 div 的内容溢出时 - 我想显示滚动条。

我知道如何使用绝对定位来完成此任务。问题是:我可以使用 div 上的 table 来实现吗？

附加要求:如果可能的话，我想避免将标题的高度设置为固定。

我尝试在我的 fiddle 中对其进行编码，但是，如您所见，I failed .

CSS:

.container {
    height: 500px;
    background-color: gainsboro;
}

.table {
    display: table;
    height: 100%;
}

.table > div {
    display: table-row;
}

.table > div > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
    overflow: scroll;
}

.center > div {
    height: 100%;
}

.content {
    height: 700px;
}

HTML:

<div class="container">
    <div class="table">
     <div>
         <div>XXX</div>
     </div>
     <div class="center">
         <div>
             <div class="content"></div>
         </div>
     </div>
     <div>
         <div>YYY</div>
     </div>
    </div>
</div>

Answer 1

这是一种可能的解决方案:

<div class="container">
    <div class="header">
        <div>Top Header Block</div>
    </div>
    <div class="center">
        <div class="content">
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
        </div><!-- .content -->
    </div><!-- .center -->
    <div class="footer">
        <div>Bottom Footer Block</div>
    </div>
</div>

和CSS:

.container {
    height: 200px;
}
.header, .footer {
    background-color: gainsboro;
}
.center {
    height: inherit;
}
.content {
    background-color: #F0F0F0;
    height: inherit;
    overflow: auto;
}

由于您要固定容器的高度，因此您将继承 .center 中的高度。和 .content <div>的。

如果调整容器高度，中心 div 会展开，但页眉和页脚 div 保持相同高度。

使用overflow在内容 div 上以允许滚动。

fiddle 引用:http://jsfiddle.net/audetwebdesign/nae5z/