flex实现顶部高度不固定，底部高度自适应布局

1. 头部不固定，底部高度自适应

这种是通过flex布局实现

<div id="wrapper">
    <div class="header">头部</div>
    <div class="main">剩下的</div>
</div>

#wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header {
    width: 100%;
    height: auto;
    flex-shrink: 0;
}
.main {
    width: 100%;
    flex: 1;// flex 1的意思就是 flex-grow 1,这里是缩写
    // flex-grow: 1;
    overflow-y: auto;
}

2. 头部固定，底部高度自适应

这种普通的布局是通过calc来实现的

<div id="wrapper">
    <div class="header">头部</div>
    <div class="main">剩下的</div>
</div>

#wrapper {
    width: 100%;
    height: 100%;
}
.header {
    width: 100%;
    height: 100px;
}
.main {
    width: 100%;
    height: calc(100% - 100px);
}

效果如下：

参考文章:
深入理解css3中的flex-grow、flex-shrink、flex-basis
使用FLEX实现一种上下高度不固定的自适应布局
flex 布局的基本概念- CSS（层叠样式表） | MDN