如何將頁腳始終保留在頁面底部？

我有一個115像素的圖像，我想在我的頁面底部。我在網上搜索如何使它始終停留在頁面底部，並得到了很多複雜的答案。我用我自己的代碼編寫了代碼（至少在我的瀏覽器中）。我意識到這可能是一個不成熟的做法，並且想知道是否有任何潛在的問題。這裏是我的代碼如何將頁腳始終保留在頁面底部？

<div id="footer" style="position:fixed;top:100%;margin-top:-115px;left:0%;repeat:repeat-x;background:url(http://EXAMPLE.com/images/bottom-border.png);height:115px;width:100%;"> 
&nbsp; 
</div>

來源

2013-02-19 Alesana

如果它的工作原理，它的工作原理。你不需要任何人的批准就可以按你想要的方式建立一個頁面。只要確保在您想要支持的所有瀏覽器和版本中查看它。「固定」是讓東西留在頁面上一個地方的正確方法。對我來說，說'底部：0％'更合理，並根據需要調整邊距，但正如我所說，如果它有效！ – 2013-02-19 15:01:18

您可能想要考慮如果正文文本與視口高度一樣長，會發生什麼情況。文字可能會落在固定頁腳的後面，您可能無法看到它。 – 2013-02-19 15:09:15

我意識到這一點。有沒有任何建議可以保持在底部，除非它需要低於底部？ – Alesana 2013-02-19 15:13:23

您可能想要考慮如果正文文本與視口高度一樣長，會發生什麼情況。文字可能會落在固定頁腳後面，您可能無法看到它

我會推薦;

#footer { 
    position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both; 
}

然後確保給div封裝所有的內容都有一個填充底部和頁腳的高度相同。

#main { padding-bottom: 150px; } /* must be same height as the footer */

來源

2013-02-19 15:15:25

我是否應該保留我的'top：100％;'碼？當使用這個時，頁腳是低的，我必須向下滾動許多空格才能看到它。 – Alesana 2013-02-19 15:38:07

這裏是你如何做頁腳總是在頁面底部。您可以用<div id="footer">...</div>替換footer，但我更喜歡HTML5 footer。

enter image description here

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style> 
     body { height: 100%;} 
     footer {background: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5); 
       position: fixed; bottom: 0; left: 0; height:115px;width:100%; } 
    </style> 
</head> 
<body> 
    <footer> 

    </footer> 
</body> 
</html>

來源

2013-02-19 15:30:24 Win

如何將頁腳始終保留在頁面底部？

回答

相關問題