CSS頁腳定位的問題

這裏是我到目前爲止預覽： CSS頁腳定位的問題

紅色區域是設計的一部分，應始終打倒設計滾動。所以當內容擴展時，頁腳和那個紅色條就會隨之而去。這應該在窗口的最底部。

我試着將其定位絕對，它的工作完美，除非當我重新調整瀏覽器的大小並使其變小時，它將停留在最底部，但只在瀏覽器處於全屏時才起作用。

我現在正在做的只是將它與頂部相對定位：-120px;然後如你所見，它給了我想要擺脫的額外空白。

footer { height:185px; background:url(../images/footer_bg.png) repeat-x; position:relative; z-index: 0; top:-115px; width:100%; }

不知道還有哪些代碼需要粘貼，我想這就是所有人都需要的..其餘的是自我解釋。有沒有人有任何建議如何解決這個問題？

我的目標是讓它像上面的圖像一樣，除非沒有空白，即使在瀏覽器重新調整大小時，也會一直按下底部。

謝謝！

來源

2011-08-31 Drew

這聽起來像你試圖重新發明輪子。谷歌的「粘腳」。 – thirtydot

我們使用粘滯頁腳以及 - 這裏的基本知識：

<div id="container"> 
    <div id="header">Header</div> 
    <div id="nav"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
    </ul> 
    </div> 
<div id="content">Content Here.</div> 
<div class="clearfooter"></div> 
</div> 
<div id="footer">Footer Here.</div>

注意clearfooter容器結束前。然後用CSS你需要這樣的東西：

html, body {  
    height: 100%; 
} 

#container { 
    min-height: 100%; 
    margin-bottom: -330px; 
    position: relative; 
} 

.clearfooter { 
    height: 330px; 
    clear: both; 
} 

#footer { 
    height: 330px; 
    position: relative; 
}

唯一的缺點是，這是一個固定的高度頁腳。不要忘記，如果您向頁腳添加任何可以增加頁腳高度和高度的填充，則需要相應地調整容器上的clearfooter和negative margin。

如果你碰巧需要它在IE6中工作，你就需要爲目標的容器，但是你會喜歡和使用：

#container { 
    height: 100%; 
}

希望幫助！

來源

2011-09-01 03:16:58

當你用position: relative抵消某些東西時，元素仍然「保留」它本來會佔用的空間 - 在你的情況下，你得到空白的底部區域。在你的頁腳上設置margin-bottom: -115px，告訴它不要這樣做。

來源

2011-08-31 22:50:32 Artyom

實際上它並沒有做任何事情，它只是把紅色條放在黑色條的下面，所以它的表現就像沒有任何保證金。 – Drew

粘滯的頁腳可能會很棘手，添加一個重疊的背景可能會更加怪異。你可能想要嘗試的是創建一個Sticky footer並將背景圖像應用到正文或容器背景重複-x和位置底部。

你能夠創建一個jsfiddle，我可以告訴你我的意思。

來源

2011-08-31 22:51:50

CSS頁腳定位的問題

回答

相關問題