頁腳粘貼到頁面底部

嗨我有一個CSS問題，因爲我試圖將頁腳粘到頁面的底部，但它只是將它粘到視口的最下方而不是底部文件。頁腳粘貼到頁面底部

有人可以幫我理解爲什麼這是好嗎？

我的css和html非常簡單，雖然在閱讀了很多示例並嘗試了一些東西之後，我仍然無法獲得這個工作。我不希望我的頁腳內包裝，而不是它的外面，我也不想要設置高度：100％的包裝。

我的HTML看起來象下面這樣：

<div class="wrapper"> 
... some content 
</div> 
<div class="footer"> 

</div>

而且我的CSS：

html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    position:relative; 
} 

body { 
    position:relative; 
    height: 100%; 
    background-color: #D8D8D8; 
    margin: 0; 
    padding: 0; 
    font-family: "Trebuchet MS", Verdana, tahoma, arial, serif; 
    font-size: 12pt; 
} 

.wrapper { 
    position:relative;   
    margin-left: auto; 
    margin-right: auto; 
    width: 1024px; 
    padding: 6px; 
    margin-bottom: 30px; 

} 

.footer { 
    position: absolute; 
    bottom:0; 
    left: 50%; 
    margin-left: -512px; 
    height: 25px;   
    background-color: #E6E6E6; 
    width: 1024px; 
    padding: 6px; 
    clear:both;

}

是否有可能與頁腳要做到這一點包裝之外？

我認爲在頁腳上設置絕對位置意味着它將根據body或html進行定位，因爲它們是下一個具有位置的元素：relative，bottom：0似乎只是視口的底部即使包裝div在很多內容上延伸過去。

這樣做的結果是，當包裝內有很多內容時，頁腳實際上會在頁面中間向上延伸，因爲底部計算爲視口的底部。

謝謝

來源

2013-02-28 berimbolo

它不在包裝內。檢查此http://jsfiddle.net/tfRuy/ – Sowmya 2013-02-28 10:37:19

谷歌粘性頁腳:) – Morpheus 2013-02-28 10:37:43

沒有必要添加「職位」的所有類。 – 2013-02-28 10:38:42

定位不需要一直使用。該屬性僅用於某些情況下專門「定位」內容。

我覺得從

.footer

去除

position: absolute;

應該解決的問題。

來源

2013-02-28 10:44:32 TDsouza

這只是意味着現在我回到了原來的位置，即如果包裝中的內容足夠大，如果包裝中的內容非常小，則頁腳位於頁面的底部，我的頁腳浮起一半該頁面不是我所追求的。 – berimbolo 2013-02-28 13:05:16

所以基本上你想要包裝粘貼到頁面的底部時，有很多的內容和視口的底部時，只有很少的內容?? – TDsouza 2013-03-01 05:32:06

嘗試'body {min-height：100％}'，並保留'.footer'的'position：absolute'。只有當內容較少時，你的頁腳才應該位於視口100％的位置。希望這可以幫助。 – TDsouza 2013-03-01 05:37:03

頁腳粘貼到頁面底部

回答

相關問題