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

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

换句话说,我想要的是让带有标题,正文和页脚的面板填满屏幕,这样就没有页面滚动条.即使主体内容的高度较小,面板也应始终具有100％的屏幕/容器高度.如果面板主体内容具有更高的高度,则面板主体应滚动而不是整个页面.

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

这是基本的HTML结构：

A heading with a dynamic height

A footer with a dynamic height

最佳答案 您可以使用css table table-row table-cell,面板主体的高度为100％,将面板标题和页脚推到最小高度.

并在面板主体中为滚动部分添加另一个div.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%;

}

A heading with a dynamic height

May be a lot or little content

A footer with a dynamic height