頁面一般可以分成三部分，頭部，底部，中間內容部分。

一般不用考慮中間高度部分，因為可以靠內容撐開，然後讓底部到達底部。但是當中間內容太少時，底部就會頂不到底部。

方法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 頁面 占滿全屏