使用 CSS 使具有动态面板主体高度的面板填充父容器高度的其余部分

Question

我有一个具有页眉、正文和页脚的面板，即使面板正文中的内容是否溢出，该面板也需要填满屏幕（或其父容器）。如果确实溢出，则正文将滚动。页眉和页脚高度是动态的，因为它们可能会随着不同的视口尺寸而变化，因此我无法对面板主体高度或填充进行硬编码以考虑页眉/页脚。

换句话说，我想要的只是让带有页眉、正文和页脚的面板填满屏幕，这样就没有页面滚动条。即使正文内容的高度较小，面板也应始终具有屏幕/容器高度的 100%。如果面板正文内容具有更大的高度，则面板正文应该滚动而不是整个页面。

这是我的问题的jsfiddle 示例。如果您取消注释 javascript，您将看到我想要发生的事情。我不想使用 javascript，虽然 CSS3 功能很好。

这是基本的 HTML 结构：

<div class="container">
    <div class="panel">
        <div class="panel-heading">
            <h1>A heading with a dynamic height</h1>
        </div>
        <div class="panel-body">
            <!-- May be a lot or little content -->
        </div>
        <div class="panel-footer">
            <h1>A footer with a dynamic height</h1>
        </div>
    </div>
</div>

Answer 1

您可以使用 css table + table-row + table-cell 来做到这一点，面板主体的 100% 高度将面板标题和页脚推到最小高度。

并在面板主体中添加另一个 div 用于滚动部分。

http://jsfiddle.net/kdd7ounw/

html, body {
    height: 100%;
    margin: 0;
}
.panel {
    display: table;
    height: 100%;
    width: 100%;
}
.panel > div {
    display: table-row;
}
.panel > div > div {
    display: table-cell;
    border: 1px solid red;
}
.panel .panel-body > div {
    height: 100%;
    position: relative;
}
.panel-body > div > div {
    overflow: auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

<div class="panel">
    <div class="panel-heading">
        <div>A heading with a dynamic height</div>
    </div>
    <div class="panel-body">
        <div>
            <div>
                <p style="height:2000px">May be a lot or little content</p>
            </div>
        </div>
    </div>
    <div class="panel-footer">
        <div>A footer with a dynamic height</div>
    </div>
</div>