固定定位fixed失效的解决方案-CSDN博客

移动端使用固定定位会出现很多莫名其妙的问题，特别是在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>复制代码