关于 web 页面 占满全屏

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

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

方法1、中间部分给一个最小高度(min-height = 100vh - 头部高度 - 底部高度).

     header,
     footer {
       height: 100px;
       background-color: #234abc;
       color: #ffffff;
     }

     .content {
       min-height: calc(100vh - 200px);
       /* flex: 1; */
       background-color: green;
     }

方法2、flex 布局

     html,body {
       min-height: 100%;
       display: flex;
       flex: 1;
       flex-direction: column;
     }

     header,
     footer {
       height: 100px;
       background-color: #234abc;
       color: #ffffff;
     }

     .content {
       flex: 1;
       background-color: green;
     }