移动端实现头部固定的方法及兼容问题

开发移动端常需要固定头部或者底部，中间内容滑动；实现这种效果常见的有四种方法，固定定位fixed；flex布局；绝对定位absolute；函数calc()计算内容高度；但是有些容易在iOS出现兼容性问题；

   <div  class="box">
    <div class="head">我是头部</div>
    <div class="content">
     <div v-for="item in 100" :key="item">{{ item }}</div>
    </div>
    <div class="foot">我是底部</div>
   </div>

1.固定定位fixed
css实现代码如下：

.box{
  width: 100%;
  height: 100%;
}
.head{
  width: 100%;
  height: 60px;
  line-height: 60px;
  position: fixed;
  text-align: center;
  background-color: tomato;
}
.content{
  overflow-y: scroll;
  padding: 60px 0;
}
.foot{
  width: 100%;
  height: 60px;
  line-height: 60px;
  position: fixed; 
  bottom: 0;
  left: 0;
  text-align: center;
  background-color: tomato;
}

但是在开发的过程中，使用了固定定位fixed，同事的iOS系统更新到16以上，头部会随着页面滚动，当内容滚动到超过屏幕的高度，甚至看不到头部内容;

2.flex布局
css实现代码如下：

.box{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.head{
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: tomato;
}
.content{
  overflow-y: scroll;
}
.foot{
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: tomato;
}

但是在实际开发过程中，iOS还是会出现兼容性问题，对于版本低的用户不是很友好，会出现滑动很困难的情况；曾试过在content中加进 -webkit-overflow-scrolling: touch; 实行强行滑动，但是好像没有效果；当然也还有其他兼容性问题，需要变更为

.content{
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column；
-webkit-justify-content: space-between;
justify-content: space-between;
}

注意：在小程序页面中父元素使用 display:flex 时，子元素使用 position:absolute 后。在苹果6s/6P/6sP的系统下会出现兼容问题，子元素 position:absolute 不生效页面出现布局混乱。所以当子元素要用 position:absolute ，尽量避免父元素使用 display: flex 布局。否则会出现兼容问题（开发工具测不出问题，只会在真机6s/6P/6sP才能测出问题）

3.绝对定位absolute
css实现代码如下：

.box{
  width: 100%;
}
.head{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: tomato;
}
.content{
  position: absolute;
  top: 60px;
  left: 0;
  overflow-y: scroll;
  height: calc(100vh - 120px);
  width: 100%;
}
.foot{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: tomato;
}

4.函数calc()计算内容高度
css实现代码如下：

.box{
  width: 100%;
}
.head{
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: tomato;
}
.content{
  overflow-y: scroll;
  height: calc(100vh - 120px);
}
.foot{
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: tomato;
}

以上为本人工作中遇到过的问题，或许还有其他兼容还没发现，欢迎大佬们指导~