css3 - 頁(yè)面布局問(wèn)題
問(wèn)題描述
在手機(jī)APP端如何設(shè)置頭和尾不變，當(dāng)滑動(dòng)中間的內(nèi)容時(shí)頭和尾不會(huì)隨著滑動(dòng)
問(wèn)題解答
回答1：position:fixed;
回答2：除了position:fixed，不要忘了給body添加padding-top和padding-bottom來(lái)去除因?yàn)閒ixed產(chǎn)生的內(nèi)容不正常顯示問(wèn)題
回答3：position:stickysticky polyfill: https://github.com/wilddeer/s...
回答4：用position:fixed解決，然后body要添加padding-top，padding-bottom樣式，不然的話中間內(nèi)容部分會(huì)有一部分被頭部尾部蓋住。
回答5：position:fixed可以解決問(wèn)題，但是安卓下會(huì)出現(xiàn)bug，完美的解決方案應(yīng)該是避開(kāi)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：
大家說(shuō)的都很好 完美 來(lái)學(xué)習(xí)的 哈哈
相關(guān)文章：
1. android - 使用百度sdk調(diào)用SDKInitializer.initialize(this)時(shí)報(bào)錯(cuò)？2. javascript - 最近用echarts做統(tǒng)計(jì)圖時(shí)遇到兩個(gè)問(wèn)題！！3. 淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑4. html5 - 用h5本地存儲(chǔ)是否安全？5. 基于Spring MVC Java的配置無(wú)法正常工作控制臺(tái)顯示無(wú)錯(cuò)誤，但我的jsp頁(yè)面未顯示6. javascript - webpack-dev-server和webpack沖突嗎7. javascript - react熱加載的一段代碼8. android - 優(yōu)酷的安卓及蘋(píng)果app還在使用flash技術(shù)嗎？9. 微信公眾號(hào)在線生成二維碼帶參數(shù)怎么搞？10. myeclipse中修改了javaweb的web.xml文件，為什么有時(shí)候會(huì)自動(dòng)重新部署生效，有時(shí)就不會(huì)自動(dòng)呢？
網(wǎng)公網(wǎng)安備