css3 - 頁面布局問題
問題描述
在手機APP端如何設置頭和尾不變,當滑動中間的內容時頭和尾不會隨著滑動
問題解答
回答1:position:fixed;
回答2:除了position:fixed,不要忘了給body添加padding-top和padding-bottom來去除因為fixed產(chǎn)生的內容不正常顯示問題
回答3:position:stickysticky polyfill: https://github.com/wilddeer/s...
回答4:用position:fixed解決,然后body要添加padding-top,padding-bottom樣式,不然的話中間內容部分會有一部分被頭部尾部蓋住。
回答5:position:fixed可以解決問題,但是安卓下會出現(xiàn)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>回答6:
大家說的都很好 完美 來學習的 哈哈
相關文章:
1. angular.js - angularjs的自定義過濾器如何給文字加顏色?2. angular.js使用$resource服務把數(shù)據(jù)存入mongodb的問題。3. docker-machine添加一個已有的docker主機問題4. 關于docker下的nginx壓力測試5. 為什么我ping不通我的docker容器呢???6. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.7. nignx - docker內nginx 80端口被占用8. docker - 如何修改運行中容器的配置9. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題10. docker鏡像push報錯
