关于 web 页面 占满全屏

Posted 2021-01-29 我的故事没编好

 页面一般可以分成三部分，头部，底部，中间内容部分。

一般不用考虑中间高度部分，因为可以靠内容撑开，然后让底部到达底部。但是当中间内容太少时，底部就会顶不到底部。

方法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     }