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

最新推荐文章于 2022-11-29 16:57:33 发布

原创最新推荐文章于 2022-11-29 16:57:33 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#IOS #web前端 #html #css

css 专栏收录该内容

1 篇文章

订阅专栏

在移动端开发中，iOS设备对fixed定位布局存在兼容性问题，导致导航栏显示异常。本文提出使用absolute定位替代fixed，通过创建全屏容器进行布局调整，实现在iOS系统上的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发移动端页面特别是各种程序封装的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;
    }