我正在尝试创建一个包含三个 div 的页面:页眉、页脚和内容区域。这些应该占据 100% 的屏幕。
页眉和页脚很小并且不会改变,内容区域可以是任意大小,所以我添加了overflow:auto
当它变得太大时使其滚动。
问题是,它溢出了屏幕的高度。我创建了一个小提琴来演示:https://jsfiddle.net/tdxn1e7p/ https://jsfiddle.net/tdxn1e7p/
我使用以下 CSS 来设置 html 和 body 高度,因此height:100%
trick https://stackoverflow.com/q/6654958/483779在容器上将起作用:
html,
body {
height: 100%;
}
我的文档的结构是:
<div style="height:100%;">
<div>
Header content
</div>
<div style="overflow:auto;">
Body content... this could be very long
</div>
<div>
Footer content
</div>
</div>
我发现这类问题有很多变体,例如这个问题 https://stackoverflow.com/q/2174311/483779,但无法使任何答案对我有用。
方法 1 - 弹性盒
它对于已知和未知的高度元素都非常有效。确保将外部 div 设置为height: 100%;
并重置默认值margin
on body
。请参阅浏览器支持表 http://caniuse.com/#feat=flexbox.
jsFiddle https://jsfiddle.net/2kh20Lsz/
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.content {
flex: 1;
overflow: auto;
background: pink;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div style="height:1000px;">Content</div>
</div>
<div class="footer">Footer</div>
</div>
方法 2 - CSS 表
对于已知和未知的高度元素。它也适用于包括 IE8 在内的旧版浏览器。
jsFiddle https://jsfiddle.net/6x6t02ke/
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
display: table;
}
.header, .content, .footer {
display: table-row;
}
.header, .footer {
background: silver;
}
.inner {
display: table-cell;
}
.content .inner {
height: 100%;
position: relative;
background: pink;
}
.scrollable {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
overflow: auto;
}
<div class="wrapper">
<div class="header">
<div class="inner">Header</div>
</div>
<div class="content">
<div class="inner">
<div class="scrollable">
<div style="height:1000px;">Content</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner">Footer</div>
</div>
</div>
方法 3 -calc()
如果页眉和页脚是固定高度,则可以使用CSScalc() http://caniuse.com/#feat=calc.
jsFiddle https://jsfiddle.net/ao8jqabh/
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
}
.header, .footer {
height: 50px;
background: silver;
}
.content {
height: calc(100% - 100px);
overflow: auto;
background: pink;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div style="height:1000px;">Content</div>
</div>
<div class="footer">Footer</div>
</div>
方法 4 - 全部百分比
如果页眉和页脚的高度是已知的,并且它们也是百分比,那么您只需进行简单的数学计算,使它们加在一起等于 100% 的高度。
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
}
.header, .footer {
height: 10%;
background: silver;
}
.content {
height: 80%;
overflow: auto;
background: pink;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div style="height:1000px;">Content</div>
</div>
<div class="footer">Footer</div>
</div>
jsFiddle https://jsfiddle.net/kqhj2s3p/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)