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

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

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

php创建扑克牌,HTML_用css制作扑克牌(图)，用css制作扑克牌Quote 声明：此 - phpStudy...
用css制作扑克牌(图) 用css制作扑克牌 Quote 声明:此文章是我对Mike Hall 源代码的研究得到了解更多请到http://www.brainjar.com 第一步: 分析扑克牌的结构 ...
css 高度塌陷_css中父元素高度塌陷是什么意思，如何解决？（附代码）
本篇文章给大家带来的内容是关于css中父元素高度塌陷是什么意思,如何解决?,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先得回答什么是父元素高度塌陷: 在文档流中,父元素的高度默 ...
2022年期末网页设计作业——如何制作企业网站（html+css制作）
css居父容器下,整理：子容器垂直居中于父容器的方案
本文在evernote里有备份.如果evernote的阅读区域嫌窄了,那么可以把这个链接拖入书签并点击javascript:jQuery("#container").width(9 ...
css position:absolute 父元素高度塌陷
问题在使用iSroll v4插件时,无法滚动到底部,从源码得知最大滚动位置由maxScrollY决定.从源码摘录出计算maxScrollY的部分 that.wrapperH = that.wrapp ...
网页制作中规范使用DIV+CSS命名规则（转）
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则内容如下: 页头:header 如:#header{属性:属性值;}或.h ...
table虚线边框_web前端工程师7天0基础到精通（TABLE+CSS制作《互联世纪网》）
项目七项目实践:TABLE+CSS制作<互联世纪网> 实践目标 1. 熟悉CSS属性 2. 熟练运用CSS属性控制网页样式 3. 熟悉网页制作流程项目简介: 通过上一章节的学习,我们了 ...
用html和css制作日历,CSS3制作日历
前面使用了CSS3制作过Progress Bars.分页导航.Login栏.Search Box等等.今天一起和大家使用css3来制作一个日历效果,希望大家喜欢. 目标今天我们的目标是制作如下面DE ...
DW静态网页设计与制作 JavaScript大作业 HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
HTML静态网页作业--海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...

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

A heading with a dynamic height

A footer with a dynamic height

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

最新文章

热门文章