<!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>