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;
}