在手机APP端如何设置头和尾不变,当滑动中间的内容时头和尾不会随着滑动
人生最曼妙的风景,竟是内心的淡定与从容!
位置:固定;
除了position:fixed,不要忘了為body加上padding-top和padding-bottom來移除因為fixed產生的內容不正常顯示問題
位置:黏性黏性填充: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>
大家說的都很好 完美 來學習的 哈哈
位置:固定;
除了position:fixed,不要忘了為body加上padding-top和padding-bottom來移除因為fixed產生的內容不正常顯示問題
位置:黏性
黏性填充:https://github.com/wilddeer/s...
用position:fixed解決,然後body要加入padding-top,padding-bottom樣式,不然的話中間內容部分會有一部分被頭部尾部蓋住。
position:fixed可以解決問題,但安卓下方會出現bug,完美的解決方案應該是避開fixed
大家說的都很好 完美 來學習的 哈哈