純 CSS 解決網頁 footer 完美置底


分類

建立時間: 2022年5月23日 09:07
更新時間: 2022年5月25日 22:49

說明

原本 footer 置底只需將 footer 寫在最下面就好
但如果頁面長度不夠長 footer 底下會留一大塊空白

截圖.png

後來 我總算學會了如何去愛
可惜你早已遠去消失在人海......抱歉錯頻

不適用的解決辦法

position: fixed;

這個方法使 footer 一直固定在底部,比較適合廣告

css

position: absolute;
width: 100%;
bottom: 0;

這個方法會跟其他的標籤重疊

截圖2.png

不太滿意的解決辦法

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 置底的問題
我自己測試不會跟其他標籤重疊,使用時還是需要檢查一下有沒有跑版

結果如圖

截圖1.png

如果這個方法不適合您,可以到下面參考附的網址查看其他作法
此做法也是參考底下連結

參考

觀看次數: 6452
cssfooter置底頁腳
按讚追蹤 Enjoy 軟體 Facebook 粉絲專頁
每週分享資訊技術

一杯咖啡的力量,勝過千言萬語的感謝。

支持我一杯咖啡,讓我繼續創作優質內容,與您分享更多知識與樂趣!