1.平时我们让导航栏不随页面滚动一般使用position:fixed进行固定,但这个方法在ios移动端有兼容性问题(当呼出键盘时底部就会被顶上去)
2.为解决这一问题,我们可以转变思路,让body和html不滚动,将屏幕分为两块区域,分别是导航栏和中间内容区域,然后中间内容区域设置over-flow:auto,让中间的内容区域自己滚动,从而达到页面滚动效果.
具体代码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
.web{
width: 100%;
height: 100%;
position: relative;
background: red;
}
.footer{
position: absolute;
height: 50px;
width: 100%;
background: blue;
bottom: 0;
}
.content{
position: absolute;
left:0;
right: 0;
top:0;
bottom:50px;
/*height: calc(100% - 50px);*/
background: yellow;
overflow: auto;
}
.test{
height: 1000px;
background: linear-gradient(red,white);
}
</style>
</head>
<body>
<div class="web">
<div class="content">
<div class="test"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
