頁(yè)面頭部、底部都是使用fixed做固定，目前實(shí)現(xiàn)效果如圖整個(gè)頁(yè)面最外層有一個(gè)大的div包裹，我將這個(gè)包裹div的width:90%;margin:0 auto;問題①.頂部div的width:100%;position: fixed;此時(shí)頂部并沒有水平居中（width:100%并沒有相對(duì)包裹div的width:90%來算），如何讓頂部div水平居中顯示？問題②.底部使用fixed，如何使它與頁(yè)面內(nèi)容對(duì)齊，并且不會(huì)出現(xiàn)覆蓋頁(yè)面內(nèi)容的部分高度（就是圖中紅色②標(biāo)記的那塊底部的高度）？以下是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">這是頁(yè)面頭部</div>????<div class="container">????這是頁(yè)面內(nèi)容????</div>????<div class="footer">這是頁(yè)面底部</div></div>? ??</body></html>
1 回答
已采納
橋本奈奈未
TA貢獻(xiàn)436條經(jīng)驗(yàn) 獲得超108個(gè)贊
fixed是相對(duì)整個(gè)窗口的，width的計(jì)算也是，所以如果你要保持和div一樣那就設(shè)置一樣的值。
定位之后margin: 0 auto就沒用了，可以使用left:50%;transform: translateX(-50%)居中
因?yàn)槎ㄎ恢笤孛撾x的正常的文檔流，所以會(huì)覆蓋到地下的內(nèi)容，那么可以把地下那個(gè)空間留出來即可，margin-bottom,padding-bottom都可以，但是比較好的做法是在fixed元素外層套一層div
<footer> ????<div> ????????這個(gè)div?fixed ????</div> </footer>
然后高度給的是footer這個(gè)元素，而div的height設(shè)置為inherit。
-
努力奔跑的自己謝謝，您說的其它點(diǎn)我都實(shí)現(xiàn)了相應(yīng)的效果，我對(duì)你說的width計(jì)算相對(duì)于整個(gè)窗口的計(jì)算有疑問，代碼如下：<!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">這是頁(yè)面左側(cè)</div> <div class="right">這是頁(yè)面右側(cè)</div> </div> </body> </html> 該布局采用float，left和right的width百分比是相對(duì)于最外層的div的width的90%來計(jì)算的。所以我還是不太理解你說的width計(jì)算相對(duì)于整個(gè)窗口計(jì)算？ -
橋本奈奈未我是說fixed的元素會(huì)相對(duì)于窗口，因?yàn)閒ixed就是相對(duì)窗口定位的
添加回答
舉報(bào)
0/150
提交
取消