移动端使用固定定位会出现很多莫名其妙的问题,特别是在ios上,当软键盘唤起时,fixed元素被挤到屏幕中央,导致布局错乱的想象。
特别是最新的ios11的系统,会出现fixed兼容的问题。所以不用fixed而是用absolute来实现固定定位。
在线预览:github.czero.cn/tabfix.html
正常结构
<html>
<body>
<header>头部固定</header>
<container>中间内容可滚动</container>
<footer>底部固定<footer>
</body>
</html>
复制代码
实现原理
在html,body中设置
overflow:hidden;
height:100%;
复制代码
此时超出屏幕的部分是不可见也不可滑动的 我们给头部和尾部添加绝对属性
position:absolute
复制代码
并制定要固定在屏幕的哪个位置,设置相对应的值
比如top:0;
或者bottom:0;
复制代码
给中间内容部分设置可滚动,并让高度100%
overflow:scroll;
或者overflow:auto;
height:100%;
复制代码
这样就可以实现头部尾部固定,中间内容区域是可滚动
优化:
给中间内容部分添加
-webkit-overflow-scroll:touch //解决滑动无惯性
复制代码
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
html,body{
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
p{
margin: 0;
}
.tab_box{
background: #6495ed;
text-align: center;
color: white;
height: 40px;
line-height: 40px;
position: absolute;
width: 100%;
}
header{
top:0;
}
footer{
bottom: 0;
}
.container{
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
text-align: center;
padding: 40px 0;
box-sizing: border-box;
background: #ccc;
}
.container p:nth-last-child(1),p:nth-of-type(1){
background: red;
color: white;
}
</style>
</head>
<body>
<header class="tab_box">固定标题栏</header>
<div class="container">
<p>这是中间第一条可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>这是中间可滚动内容</p>
<p>滚动到内容区域最底部</p>
</div>
<footer class="tab_box">固定底部导航栏</footer>
</body>
</html>复制代码