页面一般可以分成三部分，头部，底部，中间内容部分。
一般不用考虑中间高度部分，因为可以靠内容撑开，然后让底部到达底部。但是当中间内容太少时，底部就会顶不到底部。
方法1、中间部分给一个最小高度(min-height = 100vh - 头部高度 - 底部高度).
1 ????header, 2 ????footer { 3 ??????height: 100px; 4 ??????background-color: #234abc; 5 ??????color: #ffffff; 6 ????} 7 ?8 ????.content { 9 ??????min-height: calc(100vh - 200px);10 ??????/* flex: 1; */11 ??????background-color: green;12 ????}方法2、flex 布局
1 ????html,body { 2 ??????min-height: 100%; 3 ??????display: flex; 4 ??????flex: 1; 5 ??????flex-direction: column; 6 ????} 7 ?8 ????header, 9 ????footer {10 ??????height: 100px;11 ??????background-color: #234abc;12 ??????color: #ffffff;13 ????}14 15 ????.content {16 ??????flex: 1;17 ??????background-color: green;18 ????}关于 web 页面 占满全屏
原文地址：https://www.cnblogs.com/xguoz/p/10168010.html