純 CSS 解決網頁 footer 完美置底
分類
建立時間: 2022年5月23日 09:07
更新時間: 2022年5月25日 22:49
說明
原本 footer 置底只需將 footer 寫在最下面就好
但如果頁面長度不夠長 footer 底下會留一大塊空白
後來 我總算學會了如何去愛
可惜你早已遠去消失在人海......抱歉錯頻
不適用的解決辦法
position: fixed;
這個方法使 footer 一直固定在底部，比較適合廣告
css
position: absolute;
width: 100%;
bottom: 0;
這個方法會跟其他的標籤重疊
不太滿意的解決辦法
min-height: 80vh;
將這個屬性放在一個標籤上，例如 div 或其他的
雖然可以解決，但是 footer 是接近完美置底
一般都會超過一點點，往下滑才可以看到全部 footer
實際因手機的寬度而有所不同
比較能接受的辦法
首先來看一下 html 結構
html
<!DOCTYPE html>
<html>
<body>
<main>
</main>
<footer>
</footer>
</body>
</html>
上面 html 範例為大概的結構，實際上還包含一些其他的內容
因為我的 html 結構較簡單
使用 CSS 改 html body 還不會影響其他標籤
方法1
css
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
使用 flex，將不足的部分用 flex-grow 補滿
如果超過也不會怎麼樣
方法 2
css
html,
body {
height: 100%;
}
body>footer {
position: sticky;
top: 100vh;
}
看起來更簡短了，sticky 特性很特殊
一般比較常見的是 header，當畫面可以看到 header 時，它會正常顯示
當往下滑時 header 會黏在畫面上，直到它的父標籤也跟著滑走就跑掉了
我以為這個只能往上粘，沒想到往下粘卻解決了 footer 置底的問題
我自己測試不會跟其他標籤重疊，使用時還是需要檢查一下有沒有跑版
結果如圖
如果這個方法不適合您，可以到下面參考附的網址查看其他作法
此做法也是參考底下連結
參考
觀看次數: 7754
cssfooter置底頁腳
一杯咖啡的力量，勝過千言萬語的感謝。
支持我一杯咖啡，讓我繼續創作優質內容，與您分享更多知識與樂趣！