如何解决IOS系统下fixed定位布局失败的兼容问题

    在开发移动端页面特别是各种程序封装的h5APP中,我们常常会需要加上下导航栏的功能,在移动端和PC端用position:fixed就能解决,但是实际过程中在IOS端常常会遇到不兼容的问题,比如页面滑到一半置顶就消失,在网络上找了很多方法,都不是很实用,于是在研究了一下。
  简单来说,就是用absolute定位来代替fixed定位。先用一个一个长宽为全屏幕的容器包裹顶部置顶和下面滑动部分,代码如下

<html>
  <div class="box"> 
    <div class="top"></div>//这里放导航栏
    <div class="content"></div>//这里放内容
    <div class="bottom"></div>//这里放底部栏
  </div>
</html>
  .box{
    width:100vw;
    height:100vh;
    position:absolute;
    top:0;
  }
  .top{
    width:100%;
    height:20vh;//顶部导航栏的高度
   }
   .content{
     width:100%;
     height:59.9vh;
     -webkit-overflow-scrolling: touch;//IOS端解决滑动问题;
     overflow: auto;
    }
    .bottom{
    width:100%;
    height:20vh;
    }

    实测在应用中是有效的,至于更有效的方法还要之后再研究。

你可能感兴趣的:(css)