不用fixed实现顶部或底部固定

当我们有需求要实现顶部或底部固定时，大多是时候我们都会想到用fixed实现，但是某些设备上会出现兼容性问题（如IOS）。

当然解决方法有多种，可以按照需求选择适当的方案，如absolute，flex。这里我们先讲怎么通过flex布局实现模块的固定。

<div class="box">
    <div class="header">header</div>
    <div class="main">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <div class="footer">footer</div>
</div>

html,body,.box{
    height: 100%;  //设置父元素高度等于设备高度
}

.box{
    display: flex;  
    flex-direction: column;   //让子元素纵向排列
}
 .main{
    height: 0px; //必须设置高度，否则flex-grow无效
    flex-grow: 1;  //设置为1 -> 当父元素有剩余空间是将拉伸当前元素
    overflow-y: scroll;
}
.header{
    height: 100px;
    background: red;
}
p{
    height: 100px;
}
.footer{
    height: 100px;
    background: blue;
}