小技巧css解决移动端ios不兼容position:fixed
<!DOCTYPE html>
<html >
<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>
/* 垂直三块都用fixed 或者上下用fixed 中间用absolute */
.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;-webkit-overflow-scrolling: touch;background-color:#BABABA;}
</style>
</head>
<body>
<header class="head">顶部固定区域</header>
<article class="main" >
<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>
另一个例子
<!DOCTYPE html>
<html >
<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>
* {
margin: 0;
padding: 0;
}
.container {
background-color: aqua;
font-size: 20px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.container ul{padding-bottom: 50px; padding-top: 50px;}
header{
position: absolute;
height: 50px;
left: 0;
background: #ccc;
width: 100%;
top: 0;
z-index: 4;
}
footer{
position: absolute;
height: 50px;
left: 0;
background: #ccc;
width: 100%;
bottom: 0;
z-index: 5;
}
input {
font-size: 16px;height: 25px;
}
</style>
<script src="wmall/mall/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$(".container").height(window.innerHeight);
})
</script>
</head>
<body>
<header>header
<input type="text" placeholder="请输入...">
</header>
<div class="container">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
<li>List Item 11</li>
<li>List Item 12</li>
<li>List Item 13</li>
<li>List Item 14</li>
<li>List Item 15</li>
<li>List Item 16</li>
<li>List Item 17</li>
<li>List Item 18</li>
<li>List Item 19</li>
<li>List Item 20</li>
<li>List Item 21</li>
<li>List Item 22</li>
<li>List Item 23</li>
<li>List Item 24</li>
<li>List Item 25</li>
<li>List Item 26</li>
<li>List Item 27</li>
<li>List Item 28</li>
<li>List Item 29</li>
<li>List Item 30</li>
<li>List Item 31</li>
<li>List Item 32</li>
<li>List Item 33</li>
<li>List Item 34</li>
<li>List Item 35</li>
<li>List Item 36</li>
<li>List Item 37</li>
<li>List Item 38</li>
<li>List Item 39</li>
<li>List Item 40</li>
<li>List Item 41</li>
<li>List Item 42</li>
<li>List Item 43</li>
<li>List Item 44</li>
<li>List Item 45</li>
<li>List Item 46</li>
<li>List Item 47</li>
<li>List Item 48</li>
<li>List Item 49</li>
<li>List Item 50</li>
<li>List Item 51</li>
<li>List Item 52</li>
<li>List Item 53</li>
<li>List Item 54</li>
<li>List Item 55</li>
<li>List Item 56</li>
<li>List Item 57</li>
<li>List Item 58</li>
<li>List Item 59</li>
<li>List Item 60</li>
</ul>
</div>
<footer>
footer
<input type="text" placeholder="请输入...">
</footer>
</body>
</html>
- 上一篇 »CSS小技巧
- 下一篇 »CSS兼容性，IE和Firefox技巧大全