粘性頁腳不工作

嗨我想用粘性頁腳做簡單的頁面。頁腳粘到底部，但是當有很多內容時，它會落後於粘性頁腳。爲什麼？粘性頁腳不工作

html, body{ 
 
height: 100%; 
 
min-height: 100%; 
 
} 
 
#wrapper{ 
 
height: 100%; 
 
min-height: 100%; 
 
margin-bottom: -50px; 
 
} 
 
#footer{ 
 
height: 50px; 
 
background-color: blue; 
 
}

<html> 
 
<body> 
 
<div id="wrapper"> 
 
</div> 
 
<div id="footer"></div> 
 
</body> 
 
</html>

來源

2017-02-21 Zet

究竟你* 「粘頁腳」的意思*？始終顯示在頁面的底部，即使頁面需要滾動條？很多人回答並且沒人關心問這很有趣。從技術上講，沒有「*粘腳*」之類的東西，不同的人對這個術語的解釋不同。你需要什麼***？ –

使用fixed或absolute隨着width

html, 
 
body { 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
#wrapper { 
 
    height: 100%; 
 
    min-height: 100%; 
 
    margin-bottom: -50px; 
 
} 
 

 
#footer { 
 
    position: fixed; 
 
    width: 100%; 
 
    bottom: 0; 
 
    height: 50px; 
 
    background-color: blue; 
 
}

<html> 
 

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

 
</html>

來源

2017-02-21 14:20:22 Pugazh

這是不正確的格式 –

然後你不介意發佈答案@mazenelzoor –

這個答案沒有錯。^_^ – Option

-1

定位你有你的code什麼是static footer不是sticky使sticky做到這一點。

#footer { 
    position: fixed; 
    bottom: 0; 
    z-index: 999; 
}

來源

2017-02-21 14:20:59

什麼是反對票？ –

您的解決方案至多不完整，Oke。 –

好的。謝謝@AndreiGheorghiu –

請勿使用position:absolute創建粘性頁腳。我建議你使用flexbox。請檢查我fiddle

代碼段：

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    min-height: 100vh; 
 
} 
 

 
main { 
 
    flex: 1 0 auto; 
 
} 
 

 
.footer { 
 
    background: crimson; 
 
}

<main> 
 
    <h2>Your Content goes here...</h2> 
 
</main> 
 

 
<footer class="footer"> 
 
    This is sticky footer 
 
</footer>

來源

2017-02-21 14:26:52 Mattonit

['不粘']（https://jsfiddle.net/websiter/gpg89k5v/1/）？ –

爲什麼不把你的小提琴加入這裏？多數民衆贊成在代碼片段是.. – Option

我會上投票解決方案：不創建滾動條時沒有足夠的內容。始終保持腳註。允許可變的頁腳高度。 –

粘性頁腳不工作

回答

相關問題