Footer 置底的幾種作法

footer 要如何保持在底部呢？ 來看看！

Footer 置底

頁面最底下定義：

• Footer 貼合底部、不隨視窗移動

這篇舉例的命名說明：

• 包內容區塊：wrapper
• 內容區塊：content
• 底部區塊：footer

<div class="wrapper">
  <div class="content">
    <h1>content</h1>
  </div>
</div>
<footer>
  <h1>footer</h1>
</footer>

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex-grow: 1;
  background-color: beige;
}
footer {
  background-color: #d9d996;
}

html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
}
footer {
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: #d9d996;
}

查看 flex、grid 方式 的 Demo

height

height 100% + 預留 footer 高度 (假設 60px 高)：

html, body {
  height: 100%; 
  margin:  0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -60px;
}
.content {
  padding-bottom: 60px; 
  background-color: beige;
}
footer {
  height: 60px;
  background-color: #d9d996;
}

• html, body 設定 height: 100% ，最外層高度讓他彈性最高可以100%。
• 包內容區塊 wrapper
  • min-height: 100% ，包內容區塊高度讓他最低也要能 100%。
  • margin-bottom: -60px ， -60px 是留給 footer 的高度空間。
    
• 內容區塊 content
  • padding-bottom: 60px ，讓 content 的內容不影響 footer。

footer 就會在最下方囉，但有缺點是 footer 高度有變就都要一起更改。

pin

從平面設計漸漸轉職到前端網頁，日常就是追劇、看綜藝大笑來撫平身心。

『沒事多學習，多學習好事。』來鼓勵躺平的自己。

喜歡我的文章請幫我按讚哦！信箱：doublinlin@gmail.com