實現一個上下固定，中間自動填滿的佈局

王铁柱6發表於2024-11-29

有多種方法可以實現一個上下固定，中間自動填滿的佈局。以下列出幾種常見且有效的方法，並提供程式碼示例：

1. Flexbox 佈局:

這是現代前端開發中最推薦和常用的方法，簡潔且靈活。

<div class="container">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 確保容器至少佔滿螢幕高度 */
}

header {
  /* Header 樣式 */
  background-color: lightblue;
  padding: 10px;
}

main {
  /* Main Content 樣式 */
  flex-grow: 1; /*  關鍵：讓 main 填充剩餘空間 */
  background-color: lightgray;
  padding: 10px;
}

footer {
  /* Footer 樣式 */
  background-color: lightgreen;
  padding: 10px;
}

2. Grid 佈局:

Grid 佈局也能輕鬆實現，並提供更強大的二維佈局能力，但對於簡單的三段式佈局略顯冗餘。

<div class="container">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.container {
  display: grid;
  grid-template-rows: auto 1fr auto; /*  關鍵：1fr 讓 main 填充剩餘空間 */
  min-height: 100vh;
}

header {
  /* Header 樣式 */
  background-color: lightblue;
  padding: 10px;
}

main {
  /* Main Content 樣式 */
  background-color: lightgray;
  padding: 10px;
}

footer {
  /* Footer 樣式 */
  background-color: lightgreen;
  padding: 10px;
}

3. 絕對定位 + 計算高度:

這是一種較老的方法，需要 JavaScript 計算高度，現在不推薦使用，但為了完整性仍然列出。

<div class="container">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.container {
  position: relative;
  min-height: 100vh;
}

header {
  /* Header 樣式 */
  background-color: lightblue;
  padding: 10px;
}

main {
  /* Main Content 樣式 */
  background-color: lightgray;
  padding: 10px;
  position: absolute;
  top: /* header height */;
  bottom: /* footer height */;
  left: 0;
  right: 0;
}

footer {
  /* Footer 樣式 */
  background-color: lightgreen;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

需要 JavaScript 動態計算 main 的 top 和 bottom 值，使其適應 header 和 footer 的高度變化。

總結:

強烈推薦使用 Flexbox 佈局，因為它簡潔、易於理解和維護，並且擁有廣泛的瀏覽器相容性。 Grid 佈局功能更強大，但對於這個場景略顯複雜。 絕對定位的方法較為繁瑣，需要 JavaScript 輔助，不推薦使用。

選擇哪種方法取決於你的具體需求和專案上下文。 希望這些資訊能幫助你!

相關文章