ios关于fixed布局的解决思路

fixed布局在ios中当页面滚动的时候可能会出现一些奇怪的表现,比如fixed元素随页面滚动或者消失等等。
解决思路:
要把带fixed定位的元素,和内容滚动的元素分开来,滚动部分设置绝对定位和overflow-y: scroll;使之自成一块,这样就不会出现页面的滚动。没有滚动,即使fixed失效也没有问题。

<body>
    
    <div class="header">头部</div>
 
     <div class="content">
        <!-- 内容区域(可以滚动的区域) -->
    </div>
    <footer class="footer"> 
        <!-- fixed定位的底部 -->
        <input type="text" placeholder="请输入姓名">
    </footer>
</body>

.content {
    /* 绝对定位,进行内部滚动 */
    position: absolute;
    top: 0; // 距离头部高度
    bottom: .6rem; // 距离底部高度
    right:0;
    left:0;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性,可以增加弹性 */
    -webkit-overflow-scrolling: touch;
}
.footer {
    position: absolute; // 也可用fixed
    bottom: 0;
    height: .6rem;
}

posted @ 2019-01-25 21:07  xlupc  阅读(1966)  评论(0编辑  收藏  举报