兼容ios的position的fixed

原创 曦雨幽兰 随笔 css 88阅读 2018-05-08 15:43:27 举报

<!DOCTYPE html>
<html lang="zh_cmn">
<head>
<meta charset=utf-8 />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title></title>
<style>
.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}
.head{top:0;}
.foot{bottom:0;}
.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;}
</style>
</head>
<body>
<header class="head">顶部固定区域</header>
<article class="main" id="wrapper">
<div>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
</div>
</article>
<footer class="foot">底部固定区域</footer>
</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复