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

2023年10月17日 368次阅读

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

换句话说,我想要的是让带有标题,正文和页脚的面板填满屏幕,这样就没有页面滚动条.即使主体内容的高度较小,面板也应始终具有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>

最佳答案 您可以使用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>
点赞