<!DOCTYPE html>
<html>
<head>
<title>移动端上下固定中间滑动</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
<style type="text/css">
html,body{
height: 100%;
}
body{
margin: 0;
padding: 0;
}
#container{
display: flex;
flex-direction:column;
background: #f0debf;
}
#container .setheader,#container .setFoorter{
position: fixed;
background: #0089ee;
width: 100%;
height: 3rem;
line-height: 3rem;
}
#container .headernav,#container .footernav{
text-align: center;
font-size: 1.5rem;
display: block;
color: #fff;
}
#container .setheader{
top: 0;
}
#container .setContain{
flex: 1;
overflow: scroll;
}
#container .itembox{
font-size: 1.5rem;
}
#container .setFoorter{
bottom: 0;
}
</style>
</head>
<body>
<!-- 整体框架 -->
<div id="container">
<!-- 固定头部 -->
<header id="header" class="setheader">
<div class="headernav">
头顶到天了
</div>
</header>
<!-- 中间滑动 -->
<section id="sectionbox" class="setContain">
<div class="itembox">
<ul>
<li>我们不一样~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>努力吧!少年~~~~~~</li>
<li>有啥不一样!少年~~~~~~</li>
</ul>
</div>
</section>
<!-- 固定页尾 -->
<footer class="setFoorter">
<div class="footernav">
底部导航
</div>
</footer>
</div>
<script type="text/javascript">
<!-- 移动端使用rem响应不同屏幕布局 -->
//通过window.screen.width获取屏幕的宽度
var winWidth=window.screen.width / 30;
document.getElementsByTagName('html')[0].style.fontSize=winWidth+'px';
// 根据导航栏高度设置文本上下间距
var headerHight = document.getElementById('header').offsetHeight;
console.log('获取页头高度',headerHight);
document.getElementById('sectionbox').style.paddingTop=headerHight/1.2+'px';
document.getElementById('sectionbox').style.paddingBottom=headerHight/1.2+'px';
</script>
</body>
</html>