How to solve the problem of fixed location fixed failure under IOS?

How to solve the problem of fixed location fixed failure under IOS?

I believe that everyone will encounter the problem of fixed failure when working on mobile projects. Here we are talking about under ios, when the bottom of the head adopts fixed positioning, the entire page scrolls when the center part is swiped, which means that the fixed positioning fails. . So how to solve this problem? Here is a little trick to share with you.

`>html code

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

</footer>

css style

/header/.header,.footer,.main { display: block; } .header { position: fixed; top:0; left: 0; right:0; height:100px; } / bottom / .footer { position: fixed; bottom: 0; left: 0; right:0; height: 30px; } .main{ / main is positioned absolutely, does inner scrolling / position: absolute; / top is the height of the header / top: 100px; / bottom is bottom height / bottom: 30px; / make it scrollable / overflow-y: scroll; /



























Add elastic scrolling to solve the problem of unsmooth scrolling /
-webkit-overflow-scrolling:touch;
} .main
.content{
height:2000px;
}

`

In addition, the header and footer in the code use fixed positioning. If you consider that the older iOS system does not support fixed, you can replace fixed with absolute.