頁面頭部、底部都是使用fixed做固定，目前實現效果如圖整個頁面最外層有一個大的div包裹，我將這個包裹div的width:90%;margin:0 auto;問題①.頂部div的width:100%;position: fixed;此時頂部并沒有水平居中（width:100%并沒有相對包裹div的width:90%來算），如何讓頂部div水平居中顯示？問題②.底部使用fixed，如何使它與頁面內容對齊，并且不會出現覆蓋頁面內容的部分高度（就是圖中紅色②標記的那塊底部的高度）？以下是html/css代碼<!DOCTYPE html><html><head>? ? <meta charset="UTF-8">? ? <title></title>? ? <style>? ? ? ? body{? ? ? ? ? ? margin: 0;? ? ? ? ? ? padding: 0;? ? ? ? ? ? color: #fff;? ? ? ? }? ? ? ? .container{? ? ? ? ? ? width: 800px;? ? ? ? ? ? height: 1000px;? ? ? ? ? ? background: #4c77f2;? ? ? ? ? ? margin: 0 auto;? ? ? ? ? ? padding-top: 40px;? ? ? ? ? ? text-align: center;? ? ? ? }? ? ? ? .header{? ? ? ? ? ? width:100%;? ? ? ? ? ? position: fixed;? ? ? ? ? ? height: 40px;? ? ? ? ? ? background: #414141;? ? ? ? ? ? text-align: center;? ? ? ? ? ? font-size: 16px;? ? ? ? ? ? line-height: 40px;? ? ? ? }? ? ? ? .footer{? ? ? ? ? ? width: 800px;? ? ? ? ? ? height: 100px;? ? ? ? ? ? background: #333;? ? ? ? ? ? margin: 0 auto;? ? ? ? ? ? text-align: center;? ? ? ? ? ? font-size: 16px;position:fixed;bottom:0;? ? ? ? }? ? </style></head><body><div style="margin:0 auto;width:90%;">????<div class="header">這是頁面頭部</div>????<div class="container">????這是頁面內容????</div>????<div class="footer">這是頁面底部</div></div>? ??</body></html>
1 回答
已采納
橋本奈奈未
TA貢獻436條經驗 獲得超108個贊
fixed是相對整個窗口的，width的計算也是，所以如果你要保持和div一樣那就設置一樣的值。
定位之后margin: 0 auto就沒用了，可以使用left:50%;transform: translateX(-50%)居中
因為定位之后元素脫離的正常的文檔流，所以會覆蓋到地下的內容，那么可以把地下那個空間留出來即可，margin-bottom,padding-bottom都可以，但是比較好的做法是在fixed元素外層套一層div
<footer> ????<div> ????????這個div?fixed ????</div> </footer>
然后高度給的是footer這個元素，而div的height設置為inherit。
-
努力奔跑的自己謝謝，您說的其它點我都實現了相應的效果，我對你說的width計算相對于整個窗口的計算有疑問，代碼如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兩列布局</title> <style> body{ margin: 0; padding: 0; } .left{ width:60%; height: 1000px; float:left; background: #1a5acd; color: #fff; } .right{ width: 40%; height: 1000px; float:right; background: #5880f9; color: #fff; } </style> </head> <body> <div style="width:90%;margin:0 auto;"> <div class="left">這是頁面左側</div> <div class="right">這是頁面右側</div> </div> </body> </html> 該布局采用float，left和right的width百分比是相對于最外層的div的width的90%來計算的。所以我還是不太理解你說的width計算相對于整個窗口計算？ -
橋本奈奈未我是說fixed的元素會相對于窗口，因為fixed就是相對窗口定位的
- 1 回答
- 0 關注
- 1077 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消