伊谢尔伦2017-04-17 11:45:42
除了position:fixed，不要忘了给body添加padding-top和padding-bottom来去除因为fixed产生的内容不正常显示问题
ringa_lee2017-04-17 11:45:42
用position:fixed解决，然后body要添加padding-top，padding-bottom样式，不然的话中间内容部分会有一部分被头部尾部盖住。
黄舟2017-04-17 11:45:42
position:fixed可以解决问题，但是安卓下会出现bug，完美的解决方案应该是避开fixed
<!DOCTYPE html>
<html>
<head>
<title>布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
<style type="text/css">
*{margin:0;padding:0;font-size: 2vw;color: #fff;}
.top{
height: 50px;
background: #f00;
position: relative;
}
.mean{
height: auto;
background: #095fb6;
position: absolute;
top: 50px;
bottom:50px;
left: 0;
right: 0;
overflow-x: hidden;
overflow-y: auto;
}
.bottom{
height: 50px;
background: #ccc;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
</style>
</head>
<body>
<p class="top">我是文字</p>
<p class="mean">
<p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>0000</p>
</p>
<p class="bottom">我是文字</p>
</body>
</html>