css3 - 頁面布局問題
問題描述
在手機APP端如何設(shè)置頭和尾不變，當(dāng)滑動中間的內(nèi)容時頭和尾不會隨著滑動
問題解答
回答1：position:fixed;
回答2：除了position:fixed，不要忘了給body添加padding-top和padding-bottom來去除因為fixed產(chǎn)生的內(nèi)容不正常顯示問題
回答3：position:stickysticky polyfill: https://github.com/wilddeer/s...
回答4：用position:fixed解決，然后body要添加padding-top，padding-bottom樣式，不然的話中間內(nèi)容部分會有一部分被頭部尾部蓋住。
回答5：position:fixed可以解決問題，但是安卓下會出現(xiàn)bug，完美的解決方案應(yīng)該是避開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：
大家說的都很好 完美 來學(xué)習(xí)的 哈哈
相關(guān)文章：
1. 我在導(dǎo)入模板資源時遇到無法顯示的問題，請老師解答下2. 運行python程序時出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯誤？3. thinkphp6使用驗證器 信息如何輸出到前端頁面4. javascript - h5微信中怎么禁止橫屏5. PHPExcel表格導(dǎo)入數(shù)據(jù)庫怎么導(dǎo)入6. python - sqlalchemy更新數(shù)據(jù)報錯7. macos - 無法source activate python278. javascript - ajax請求不返回，關(guān)閉頁面時才返回。。。9. html5 - 前端面試碰到了一個緩存數(shù)據(jù)的問題，來論壇上請教一下10. 預(yù)訂金和尾款分別支付
網(wǎng)公網(wǎng)安備