聲明：兼容要求比較高，請另尋它法，如 js 控制
HTML結(jié)構(gòu)
<html>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
CSS樣式
html{
height: 100%; /*保證頁面高度撐滿屏幕*/
}
body{
height: 100%;
display: flex;
flex-direction: column;
margin: 0;
}
.header{
height: 100px;
background: antiquewhite;
}
.content{
flex: 1;
background: cadetblue;
}
.footer{
height: 100px;
background: darkgrey;
}
效果圖
效果圖.png
