移动端固定位置

最新推荐文章于 2022-07-06 17:29:04 发布

Leo-hzj

最新推荐文章于 2022-07-06 17:29:04 发布

阅读量2.2k

点赞数 1

分类专栏： css 文章标签：移动端移动开发固定位置固定导航条

本文链接：https://blog.csdn.net/q36835109/article/details/51732618

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

相信大家在移动开发的时候，都会遇到一个“固定”的问题。那就是什么头部固定在屏幕顶部啊、什么尾部固定在屏幕的尾部啊这些鬼东西。。。或者你现在看到这里会想到:这还不简单吗？直接用个position:fixed不就搞好了吗，那么菜还来写文章。或者你没想到，虽然position:fixed是可以固定位置，但是在IOS下会出现这样的问题（如下图）。

只要IOS键盘出现，position:fixed的固定效果就会被破坏了。我上网找了很多资料，都是说使用position:absolute来代替position:fixed来代码固定位置，而且还要计算滚动的位置，兼容性又不是很好（这么多问题和麻烦）。那么这个问题怎么解决呢？我就不卖关子了，直接上代码了。。。

<!DOCTYPE html>
<html>
<head>
<title>移动端上下固定定位</title>
<meta charset="utf-8">
<style type="text/css">
*{
	margin:0 auto;
	padding:0;
	-webkit-box-sizing:border-box;
	}
.fixed_scroll_header{
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:111
	}
.fixed_scroll_body{
	position:absolute;
	left:0;
	right:0;
	top:40px;
	bottom:70px;
	-webkit-overflow-scrolling:touch;
	overflow-y:auto;
	}
.fixed_scroll_footer{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	}
.t_c{
	text-align:center;
	}
.m_tb_15{
	margin:15px 0px;
	}
.header{
	height:40px;
	background:#30a9d6; 
	font-size:16px;
	border-bottom:1px solid #c9c9c9;
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
	position:relative;
	}
.header .header_title{
	color:#ffffff;
	height:40px;
	line-height:40px;
	padding:12px 0px;
	}
.header_left{
	position:absolute;
	top:0px;
	left:0px;
	}
.header_right{
	position:absolute;
	top:0px;
	right:0px;
	}
.header_right .literal{
	padding:10px 15px;
	width:40px;
	height:40px;
	line-height:40px;
	color:#ffffff;
	}
.button{
	width:90%;
	height:40px;
	line-height:40px;
	background:#30a9d6;
	color:#ffffff;
	border-radius:5px;
	display:block;
	margin-left:5%;
	text-align:center;
	}
</style>
</head>
<body>
<div class="fixed_scroll_header">
	<div class="header">
		<div class="header_left">
			<a href="javascript:history.go(-1);">
				后退
			</a>
		</div>
		<div class="t_c">
			<span class="header_title">Test</span>
		</div>
	</div>
</div>
	<div class="fixed_scroll_body">
		<div style="padding:0px 15px;">
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
			<div style="margin:30px 0px;">
				<input type="text" value="">
			</div>
		</div>
	</div>
	
	<div class="fixed_scroll_footer">
		<div class="m_tb_15">
			<a href="javascript:void(0);" class="button" id="submit_attention">提交</a>
		</div>
	</div>
</body>
</html>