CSS Sticky Footer Margin

我不想要一個固定頁腳，我需要一個STICKY頁腳。CSS Sticky Footer Margin

我的粘性頁腳首先運行良好，但當內容處於特定高度時，頁腳和頁面底部之間存在空白。

嘗試搞亂瀏覽器高度和內容div高度，你應該看到問題出在哪裏。

它在頁腳和頁面底部之間留下了一個尷尬的邊緣。

預先感謝您。

CSS代碼：

html, body { 
    height:100%; 
    margin:0; 
} 
body { 
    color:#FFF; 
    font:16px Tahoma, sans-serif; 
    text-align:center; 
} 
a { 
    text-decoration:none; 
} 
#wrapper { 
    height:100%; 
    margin:0 auto; 
    min-height:100%; 
    padding-bottom:-30px; 
    width:985px; 
} 
#content { 
    background:#F00; 
    height:950px; 
} 
#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    clear:both; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
} 
#footer span { 
    color:#FFF; 
    font-size:16px; 
    padding-right:10px; 
} 
#push { 
    clear:both; 
    height:30px; 
}

HTML代碼：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Bad Footer</title> 
     <link rel="stylesheet" href="badfooter.css" type="text/css"> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="content"> 
      <span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span> 
     </div> 
     <div id="push"></div> 
    </div> 
    <div id="footer"> 
     <a href=""><span>About Us</span></a> 
     <span> | </span> 
     <a href=""><span>Contact Us</span></a> 
     <span> | </span> 
     <a href=""><span>Home</span></a> 
    </div> 
</body>

來源

2012-08-08 Connor

就在你的CSS添加position: fixed;您footer類：

#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    clear:both; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
    position: fixed; /*add this new property*/ 
}

----- UPDATE -----

如果您需要停留在底部頁腳需要兩樣東西：

#wrapper { 
    /*height:100%;*/ /*you need to comment this height*/ 
    margin:0 auto; 
    min-height:100%; 
    padding-bottom:-30px; 
    width:985px; 
    position: relative; /*and you need to add this */ 
} 

#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
    position: relative; /*use relative position*/ 
}

#wrapper { 
 
    /*height:100%;*/ /*you need to comment this height*/ 
 
    margin: 0 auto; 
 
    min-height: 100%; 
 
    min-height: 700px; /* only for Demo purposes */ 
 
    padding-bottom: -30px; 
 
    width: 985px; 
 
    position: relative; /*and you need to add this */ 
 
} 
 
#footer { 
 
    background: #000; 
 
    border-top: 1px solid #00F0FF; 
 
    height: 30px; 
 
    margin-top: -30px; 
 
    padding: 5px 0; 
 
    width: 100%; 
 
    position: relative; /*use relative position*/ 
 
}

<div id="wrapper"> 
 
    <div id="content"> 
 
    <span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span> 
 
    </div> 
 
    <div id="push"></div> 
 
</div> 
 
<div id="footer"> 
 
    <a href=""><span>About Us</span></a> 
 
    <span> | </span> 
 
    <a href=""><span>Contact Us</span></a> 
 
    <span> | </span> 
 
    <a href=""><span>Home</span></a> 
 
</div>

來源

2012-08-08 15:47:46 Luis

設置位置固定不粘性頁腳...固定意味着它會始終保持底部（儘管滾動）。另一方面，粘腳是非常複雜的。如果正在滾動，則必須滾動底部才能看到頁腳，否則會停留在底部。 – Connor 2012-08-08 16:00:37

@Connor檢查答案中的更新 – Luis 2012-08-08 16:29:29

這似乎有竅門！謝謝一堆。 – Connor 2012-08-08 18:10:55

將position: fixed添加到頁腳類。請注意，它在某些舊版本的Internet Explorer中不起作用。 http://jsfiddle.net/kAQyK/

#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    clear:both; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
    position: fixed; 
    bottom: 0px; 
    left: 0px; 
}

見http://tagsoup.com/cookbook/css/fixed/爲例子，說明如何使它在IE

來源

2012-08-08 15:48:32 Samuel

關鍵詞：粘性踏步機。將位置設置爲固定不是一個粘滯的頁腳...固定意味着它將始終保持在底部（儘管滾動）。另一方面，粘腳是非常複雜的。如果正在滾動，則必須滾動底部才能看到頁腳，否則會停留在底部。 – Connor 2012-08-08 16:01:25

我有對年齡並沒有什麼相同的問題也工作似乎再工作，我意識到，我是我的頁腳下看到的空白是實際上並沒有空白，只是白色背景上白色文字的頁腳溢出。我所要做的只是補充：

overflow:hidden

我的CSS在我的頁腳。

如果有人想爲我工作的解決方案則是一樣的http://getbootstrap.com/2.3.2/examples/sticky-footer.html但有一個額外溢出：隱藏

來源

2014-07-07 01:34:19 Dominic

顯示錶= NO JS並沒有固定的高度！

在現代瀏覽器（IE 8 +）中工作 - 我在多個瀏覽器中測試過，它似乎都工作正常。

我發現了這個解決方案，因爲我需要一個沒有固定高度且沒有JS的粘性頁腳。代碼如下。

說明：基本上你有一個容器div與2個子元素：一個包裝和一個頁腳。將所有需要的東西放在頁面上（將頁腳除外）放入包裝中。容器設置爲display: table;包裝設置爲display: table-row;如果將html，正文和包裝設置爲height: 100%，則頁腳將粘到底部。

頁腳也設置爲display: table;。這是必要的，以獲得子元素的邊緣。您還可以將頁腳設置爲display: table-row;這不允許您在頁腳上設置margin-top。在這種情況下，您需要創造更多嵌套元素。

解決辦法：https://jsfiddle.net/0pzy0Ld1/15/

並與更多的內容：http://jantimon.nl/playground/footer_table.html

/* THIS IS THE MAGIC */ 
 

 
html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body, 
 
#container, 
 
#wrapper { 
 
    height: 100%; 
 
} 
 
#container, 
 
#wrapper, 
 
#footer { 
 
    width: 100%; 
 
} 
 
#container, 
 
#footer { 
 
    display: table; 
 
} 
 
#wrapper { 
 
    display: table-row; 
 
} 
 
/* THIS IS JUST DECORATIVE STYLING */ 
 

 
html { 
 
    font-family: sans-serif; 
 
} 
 
#header, 
 
#footer { 
 
    text-align: center; 
 
    background: black; 
 
    color: white; 
 
} 
 
#header { 
 
    padding: 1em; 
 
} 
 
#content { 
 
    background: orange; 
 
    padding: 1em; 
 
} 
 
#footer { 
 
    margin-top: 1em; /* only possible if footer has display: table !*/ 
 
}

<div id="container"> 
 
    <div id="wrapper"> 
 
    <div id="header"> 
 
     HEADER 
 
    </div> 
 
    <div id="content"> 
 
     CONTENT 
 
     <br> 
 
     <br>some more content 
 
     <br> 
 
     <br>even more content 
 
    </div> 
 
    </div> 
 
    <div id="footer"> 
 
    <p> 
 
     FOOTER 
 
    </p> 
 
    <br> 
 
    <br> 
 
    <p> 
 
     MORE FOOTER 
 
    </p> 
 
    </div> 
 
</div>

來源

2016-02-08 16:55:38

CSS Sticky Footer Margin

回答

相關問題