強迫頁腳停留在底部？

我只是有像這樣的佈局......

<body> 

<div id="header"> 
</div> 

<div id="left"> 
</div> 

<div id="right"> 
</div> 

<div class="clear"></div> 

<div id="footer"> 
</div>

我所想要做的是確保頁腳始終保持在屏幕的底部，我是否有去很遠了內容甚至沒有足夠的內容一直走到屏幕的底部。

截至目前，我可以得到上面列出的兩種方式的工作，但我希望兩個工作。

這是我爲此設置的CSS。

html { 
height: 100%; 
} 

body { 
height: 100%; 
position: relative; 
} 

#footer { 
position: absolute; 
bottom: 0; 
}

我知道，如果我申請最小身高：100％;到CSS文檔中的HTML元素，隨着內容的發展，但如果我沒有任何內容，它本身不會粘在屏幕的底部。分辨率不管。

我已經多次遇到這個問題，並且從來不確定如何弄清楚。所以，一些幫助將不勝感激，連同一些解釋。

非常感謝大家的幫助！

來源

2011-10-07 Aaron Brewer

'但是如果我沒有任何內容，每se'但最終你應該有內容，所以它有什麼關係。真的沒有人關心你的頁腳被困在底部而不是內容下面。我不明白爲什麼人們爲了達到這種無價值的效果而浪費了太多時間。 – animuson

@animuson：我關心它是否卡在底部。如果沒有使用我的設計將頁腳卡在底部，它會顯得很荒謬。感謝您的輸入。 :) –

可能重複[如何使頁腳固定頁腳]（http://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom ） –

使用這種隊友，這是一個很好解釋，易於遵循教程：

http://code.google.com/p/cleanstickyfooter/

最佳粘頁腳以往的作品真的非常好

報價從網站（我同意完全地）：

的區別

goog le「sticky footer」，下面列出了爲什麼這項技術比這次搜索的最佳結果更好地運作。

http://ryanfait.com/sticky-footer/ - 這種技術很相似，但是cleanStickyFooter需要更多。當您想使頁腳的寬度爲 100％時，位於這裏的技術不能很好地播放。

http://www.cssstickyfooter.com/ - 這種技術是我指出的其中一種，我說的是當它用CSS清除黑客入侵。

來源

2011-10-07 15:34:05 fmsf

無論內容量多少，或者屏幕底部是否需要將頁腳附加到內容的底部？

如果第一個，不要打擾它的定位 - 讓它跟內容之後的頁面流一起去吧。

如果第二，使用位置：固定

你可能需要一個更加清楚一點。什麼卷軸？頁眉？剩下？對？頁腳？您的整體內容是左側還是右側？爲什麼你的身體相對定位？爲什麼你有一個「身高：100％」;爲html？

來源

2011-10-07 15:32:05 Ben

我想將頁腳粘貼在內容的底部和內容的底部，如果沒有足夠的內容流到屏幕的底部，我仍然希望它粘在屏幕的底部，那有意義嗎？我不想做一個固定的位置，因爲這樣它將會堅持到屏幕的底部，而不管我有多少內容，並且在哪個內容div中要求和使用margin和/或padding。左和右是內容，更是如此。 –

你可以看看在this Artice by RyanFait

跨瀏覽器指定的佈局，總是工作:)

來源

2011-10-07 15:35:43 Ryan

從上面的谷歌... http://ryanfait.com/sticky-footer/ - 這種技術是相似的，但cleanStickyFooter需要更多。當你想讓你的頁腳有100％的寬度時，位於這裏的技術不會很好地播放。 –

強迫頁腳停留在底部？

回答

相關問題