在手机APP端如何设置头和尾不变，当滑动中间的内容时头和尾不会随着滑动
人生最曼妙的风景，竟是内心的淡定与从容！
position:fixed;
除了position:fixed，不要忘了给body添加padding-top和padding-bottom来去除因为fixed产生的内容不正常显示问题
position:stickysticky polyfill: https://github.com/wilddeer/s...
用position:fixed解决，然后body要添加padding-top，padding-bottom样式，不然的话中间内容部分会有一部分被头部尾部盖住。
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>
大家说的都很好 完美 来学习的 哈哈
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
position:fixed;
除了position:fixed，不要忘了给body添加padding-top和padding-bottom来去除因为fixed产生的内容不正常显示问题
position:sticky
sticky polyfill: https://github.com/wilddeer/s...
用position:fixed解决，然后body要添加padding-top，padding-bottom样式，不然的话中间内容部分会有一部分被头部尾部盖住。
position:fixed可以解决问题，但是安卓下会出现bug，完美的解决方案应该是避开fixed
大家说的都很好 完美 来学习的 哈哈