页面一般可以分成三部分，头部，底部，中间内容部分。
一般不用考虑中间高度部分，因为可以靠内容撑开，然后让底部到达底部。但是当中间内容太少时，底部就会顶不到底部。
方法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 }
原文：https://www.cnblogs.com/xguoz/p/10168010.html