頁腳與絕對位置 - 響應式設計

我的響應式設計有點問題。我正在使用這種風格的正常<footer>。頁腳與絕對位置 - 響應式設計

footer { 
    width: 100%; 
    height: 20px; 
    position: absolute; 
    bottom: 5px; 
    left: 0; 
}

它工作正常，當我使用較小的屏幕我必須滾動，這是正常的。

問題是<footer>不在底部。它在屏幕的中間。像全屏的margin-top: 100%一樣，沒有滾動。

我希望你明白我的意思。

謝謝！

來源

2015-03-31 Matthias M

請搜索網站上發佈之前，這已被問過一噸的時候。您正在尋找[**粘滯頁腳**]（https://css-tricks.com/snippets/css/sticky-footer/）。 – Ruddy 2015-03-31 08:47:21

謝謝！我不記得「sticky」這個詞。 – 2015-03-31 09:06:43

製作位置固定的，這可能是這個樣子

footer { 
    width: 100%; 
    height: 20px; 
    position: fixed; 
    bottom: 5px; 
    left: 0; 
}

來源

2015-03-31 08:57:37

這個想法是將元素固定在底部。使用底部或底邊參數設置底部偏移量。

你可以用這個去：

footer { 
    position:fixed; 
    height:20px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    margin-bottom:0px; 
}

來源

2015-03-31 08:48:07

我希望我正確地得到您的問題。你的問題是，當頁面中的內容很少時，頁腳位於屏幕中間，對吧？

爲了解決這個問題，你應該讓父元素佔據整個屏幕。例如，

<head> 
<style> 
footer { 
    width: 100%; 
    height: 20px; 
    position: absolute; 
    bottom: 5px; 
    left: 0; 
} 
body { 
    min-height: 100%; 
} 
</style> 
</head> 
<body> 
<div> 
    some other content 
</div> 
<footer> 
    Some content inside footer 
</footer> 
</body>

或者，如果您不介意頁腳始終在屏幕底部可見，請使用position：fixed。那麼你不需要考慮父元素的高度。

來源

2015-03-31 08:48:39 cytsunny

頁腳與絕對位置 - 響應式設計

回答

相關問題