您的位置：首页 > 移动开发

移动端固定位置

2016-06-22 10:50 309 查看
相信大家在移动开发的时候，都会遇到一个“固定”的问题。那就是什么头部固定在屏幕顶部啊、什么尾部固定在屏幕的尾部啊这些鬼东西。。。或者你现在看到这里会想到:这还不简单吗？直接用个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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  移动端 移动开发 固定位置 固定导航条
相关文章推荐
新的分享
章节导航