本文介绍了两种方法使用CSS实现页面全屏显示，并保持头部和底部固定不变。方法一采用绝对定位，将body和html高度设置为100%，然后通过相对定位设置容器、头部和底部的高度。方法二利用弹性布局（flexbox），通过设置容器的flex属性和body的flex-grow属性，同样达到预期效果。这两种方法都能确保页面在不同屏幕尺寸下头部和底部始终可见。
HTML
CSS
body,html {
height:100%;
}
/*方法1：绝对定位实现*/
.container {
box-sizing: border-box;
position: relative;
min-height: 100%;
padding: 100px 0;
background-color: blue;
}
.header {
position: absolute;
top: 0;
width: 100%;
height: 100px;
background-color: red;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: red;
}
/*方法2：弹性布局实现*/
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.body {
flex: 1 1 auto;
background-color: blue;
}
.header, .footer {
height: 100px;
flex: 0 0 auto;
background-color: red;
}
原文：https://www.cnblogs.com/qddyh/p/10463142.html
667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
