HTML/CSS 佈局技巧：#nofooter padding-bottom 預留 Footer 空間防遮蓋

程式碼結構分析

<div id="wapper">
  <div id="nofooter">
    <div id="header">...</div>
    <div id="content">...</div>
  </div>
  <div id="footer">...</div>
</div>

CSS 關鍵規則

#wapper { position: relative; min-height: 100%; }
#nofooter { padding-bottom: 70px; } /* 關鍵行 */
#footer { position: absolute; bottom: 0; height: 70px; width: 100%; }

原理解析

1. #wapper 設為 relative 定位基準，並保證最小高度 100% 撐開視窗。
2. #footer 設為 absolute; bottom: 0 固定在視窗/容器底部，高度 70px。
3. 若 #nofooter（內容區容器）**無** padding-bottom: 70px，內容區底部會與 #footer 重疊，導致最後 70px 內容被 Footer 遮蓋不可見/不可點擊。
4. padding-bottom: 70px 在內容區底部撐開 70px 空白區，Footer 絕對定位覆蓋此空白區，**視覺上 Footer 緊貼內容區底部，實際不遮擋內容**。

替代方案對比

最佳實務

• 新專案優先採用 Flexbox/Grid，配合 @supports 降級。
• 舊專案維護沿用 padding-bottom，並將 70px 定義為 CSS 變數 --footer-h 便於維護。
• 使用開發者工具（F12）檢查 Box Model，即可直觀看到 Padding 區域與 Footer 重疊關係。

理解「絕對定位 Footer + 內容區底部 Padding」經典模式，能快速解決固定底部導航/版權區遮蓋內容的通用問題。