CSS实现纵向填充布局

期待效果：

1. 有3行布局，header、content、footer；
2. header高度固定；
3. content高度不确定，内容超过可视范围，出现滚动条；
4. footer始终位于最底部，高度根据内容自动调整；

实现思路：

1. content和footer使用flex布局，是指flex方位为** column，对其方式为space-between**，这样footer始终吸底；
2. content 设置 ** overflow: auto;**不然会自动撑大外层div高度；
3. footer需要设置flex: none; 不然可能会被压缩

实现代码

// html
<div class="header">Header</div>
  <div class="box">
    <div class="content">
      <div class="something">
      111111
      222222
      33333333
      </div>
    </div>
  <div class="footer">222</div>
</div>

// css
.header {
  height:30px;
  background: red;
}
.box {
  background: green;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}

.something {
  height: 1500px;
  background: blue;
  width: 100px;
}

.content {
  overflow: auto;
}

.footer {
  min-height: 120px;
  background: orange;
  flex: none;
}

实现效果

image.png