如何添加總是出現在頁面底部的頁腳

我正在尋找一種方法來添加頁腳到我的頁面，這將始終顯示在底部。問題是，頁面上的很多內容都是通過position: absolute;來設置的，所以目前除非我手動給頁腳賦予一個margin-top: 900px;值，否則它僅僅被一個絕對定位的內容隱藏。但在內容小於900px的某些頁面上，頁面尾部和頁腳之間的底部會有一些不必要的空白。如何添加總是出現在頁面底部的頁腳

我該如何解決這個問題，使得內容結尾和頁腳之間沒有差距？

來源

2013-01-15 Click Upvote

看到這個問題：http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space – SShaheen

另外，這樣的：http://stackoverflow.com/問題/ 4154220/HTML-5英尺標籤待總是在底部/ 4154509＃4154509 – SShaheen

在新的jQuery，你可以這樣做：

<div data-role="footer" data-position="fixed"> 
<h1>Fixed Footer!</h1> 
</div>

從http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html

來源

2013-01-15 21:14:03

讓我們假設一個<footer>，與display: block和height: 250px風格。

因此，所有你需要做的，以實現你想要的是加：

position: fixed; 
top: 100%; 
margin-top: -250px;

就是這樣。它將永久對齊在底部。 :)

來源

2013-01-15 21:14:24

把一切之前的頁腳放在一個div位置相對。該div將垂直伸縮到其中的內容，並將提供緩衝區以便在其正下方保留任何內容。無需保證金。

來源

2013-01-15 21:15:23 fredsbend

粘腳。沒有JavaScript的要求：

http://www.cssstickyfooter.com/

來源

2013-01-15 21:15:26 tahdhaze09

你也可以把索引。 z-index：1;

http://www.fiveminuteargument.com/fixed-position-z-index

在你的情況，提出的z-index在CSS的頁腳在10以上。

來源

2013-01-15 21:53:46 Belhor

在做了一些擺弄之後，我被提醒說絕對定位從文檔流中移除元素。你不能依賴絕對定位的元素來影響其他元素，因爲它不會。由於您不知道內容的高度，因此使用margin-top顯然不是選項。

所以我想出了這個：基本上做一個正常的佈局與浮動然後使用相對位置移動項目，你想要他們。這樣，元素仍然會影響文檔流，但是，現在您可以完全控制位置。這正是相對定位的要求：您需要完全控制元素的位置，但您仍然希望它們的元素能夠正常影響佈局。

<html> 

<head> 

<style> 

body { 
    text-align:center; 
} 
#container { 
    position:relative; 
    margin:0 auto; 
    width: 1000px; 
    text-align:left; 
} 
#header { 
    position:relative; 
    top:0px; 
    left:0px; 
    width:1000px; 
    height: 100px; 
    border:solid 1px #000; 
} 
#sidebar { 
    position:relative; 
    top:10px; 
    left:0px; 
    width:300px; 
    height: 500px; /* for demo */ 
    float:left; 
    margin-bottom: 20px; 
    border:solid 1px #000; 
} 
#main { 
    position:relative; 
    top:10px; 
    left:310px; 
    width:690px; 
    height: 200px; /* for demo */ 
    margin-bottom:20px; 
    border:solid 1px #000; 
} 
#footer { 
    margin:0 auto; 
    top:20px; 
    width: 1000px; 
    text-align:left; 
    height: 100px; 
    clear:both; 
    border:solid 1px #000; 
} 
</style> 
</head> 
<body> 

<div id="container"> <!-- Holds all the content except the footer --> 

<div id="header">Header content here</div> 
<div id="sidebar">Sidebar content here</div> 
<div id="main">Main content here</div> 

</div> 

<div id="footer">Footer content here</div> 

</body> 

</html>

來源

2013-01-20 20:23:20 fredsbend

如何添加總是出現在頁面底部的頁腳

回答

相關問題