它适用于已知和未知的高度元素。确保设置外股利height:100%;和重置默认margin的body。
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>
对于已知和未知高度元素。它也可以在包括IE8在内的旧版浏览器中使用。
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>
如果页眉和页脚固定高度，则可以使用CSS calc()
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>
如果页眉和页脚的高度已知，并且它们也是百分比，则只需执行简单的数学运算即可将它们的高度设为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>
602392714
清零编程群