postionfixed固定_不用position:fixed实现固定元素的三种页面布局

我们平时工作中经常会遇到position：fixed，固定顶部/固定底部/固定顶部和底部，然后中间滚动这样的布局，我们第一反应就是用fixed来实现，但是fixed在ios浏览器下经常会出现各种兼容性的问题，所以就产生了抛弃fixed，但是又可以实现固定元素的效果，于是就有了下边的三种形式(出处忘了)，代码如下：

这仅仅是从布局上解决这种问题，其他比如弹窗之类的还是需要fixed，就另说，参考：

单独布局

布局

*{margin:0;padding:0;font-size: 3vw;color: #fff;}

.mean{

height: auto;

background: #095fb6;

position: absolute;

top: 0px;

bottom:0px;

left: 0;

right: 0;

overflow-x: hidden;

overflow-y: auto;

}

上固定下滚动

布局

*{margin:0;padding:0;font-size: 3vw;color: #fff;}

.top{

height: 50px;

background: #f00;

position: relative;

}

.mean{

height: auto;

background: #095fb6;

position: absolute;

top: 50px;

bottom:0