文章詳情頁

css3 - 頁面布局問題

瀏覽：116日期：2023-07-07 16:05:08

問題描述

在手機APP端如何設置頭和尾不變，當滑動中間的內容時頭和尾不會隨著滑動

問題解答

回答1：

position:fixed;

回答2：

除了position:fixed，不要忘了給body添加padding-top和padding-bottom來去除因為fixed產生的內容不正常顯示問題

回答3：

position:stickysticky polyfill: https://github.com/wilddeer/s...

回答4：

用position:fixed解決，然后body要添加padding-top，padding-bottom樣式，不然的話中間內容部分會有一部分被頭部尾部蓋住。

回答5：

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> 我是文字 0000 我是文字</body></html>回答6：

大家說的都很好完美來學習的哈哈

CSS

上一條：web - css3 @keyframes用一次后面的任何樣式就解析不了了.下一條：css3 - selected添加 border???

相關文章：

1. mysql - 表名稱前綴到底有啥用？2. 致命錯誤: Class ’appfacadeTest’ not found3. 老師們php,插入數據庫mysql，都是空的，要怎么解決4. 求大神支招，php怎么操作在一個html文件的<head>標記內添加內容？5. php點贊一天一次怎么實現6. 怎么php怎么通過數組顯示sql查詢結果呢，查詢結果有多條，如圖。7. PHP類屬性聲明？8. sql語句 - 如何在mysql中批量添加用戶？9. phpstady在win10上運行10. 在應用配置文件 app.php 中找不到’route_check_cache’配置項

排行榜

					
					mysql - sysbench cpu測試的結果看不懂，求解
【python小白】  問關于property的順序問題
javascript - vuejs+elementui 購物車價格計算，點擊加減號修改數量總價都不會改變，但是計算執行了
php點贊一天一次怎么實現
前端 - 求解？這種寫法怎么理解
javascript - 切換掉當前頁面后該頁面的js動畫會暫停？
mysql優化 - mysql update和delete和insert 操作多條數據的背后情況
sql語句 - 如何在mysql中批量添加用戶？
javascript - pluploader這個上傳插件能異步上傳嗎
docker內創建jenkins訪問另一個容器下的服務器問題
android - 哪位大神知道java后臺的api接口的對象傳到前端后輸入日期報錯，是什么情況？求大神指點
				

熱門標簽

久久福利_99r_国产日韩在线视频_直接看av的网站_中文欧美日韩_久久一

css3 - 頁面布局問題