关于 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;
    }