用flex实现头部固定，内容部分滚动

用flex实现头部固定，内容部分滚动

这么简单的一个东西，搜一下其他的文章都给我搞了一堆乱七八糟的玩意，要么就是copy别人的，看的实在心情烦躁，依次记录。看好了，其实很简单。

HTML部分

<div class="main">
    <div class="main-header">
      header的内容
    </div>
    <div class="main-body">
      body的内容
    </div>
</div>

CSS部分 (此处用了less)

.main {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .main-header {
    height: 50px;
  }

  .main-body {
    display: flex;
    flex: 1 1 auto;
    overflow: auto;
    flex-direction: column;
  }
}

最外层设置高度为显示器屏幕的高度，头部固定高度，内容部分设置flex: 1自适应滚动即可。