移動端頁面不滿一屏時如何實現滿屏背景？

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

移動端頁面不滿一屏時，實現滿屏背景的方法有很多，以下是幾種常見且有效的方案：

1. 使用min-height: 100vh:

這是最簡單直接的方法。vh是視口高度（Viewport Height）的單位，100vh代表瀏覽器視窗的可見高度。將min-height設定為100vh，即使內容不足以填滿螢幕，背景也會延伸到整個視口高度。

body {
  min-height: 100vh;
  background-color: #f0f0f0; /* 或使用背景圖片 */
  background-size: cover; /* 可選，根據需要設定背景圖片大小 */
  background-position: center; /* 可選，根據需要設定背景圖片位置 */
}

2. 使用 Flexbox 佈局:

Flexbox 可以輕鬆實現垂直方向的拉伸。將body設定為display: flex，並使用flex-grow: 1讓內容區域填充剩餘空間。

body {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  min-height: 100vh;
  background-color: #f0f0f0;
}

main { /* 或其他內容容器 */
  flex-grow: 1; 
}

3. 使用 Grid 佈局:

Grid 佈局也能實現類似的效果。

body {
  display: grid;
  min-height: 100vh;
  grid-template-rows: 1fr; /* 使用 fr 單位讓內容區域填充剩餘空間 */
  background-color: #f0f0f0;
}

main { /* 或其他內容容器 */
  /*  不需要額外的樣式，會自動填充 */
}

4. 使用 JavaScript (較少推薦，除非其他方法無法滿足需求):

可以透過 JavaScript 動態計算視口高度，並設定背景元素的高度。這種方法相對複雜，且效能開銷略大，一般情況下不推薦使用。

function setBackgroundHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', setBackgroundHeight);
setBackgroundHeight();

// CSS
body {
  min-height: calc(var(--vh, 1vh) * 100);
  background-color: #f0f0f0;
}

選擇哪種方法？

  • 大多數情況下，min-height: 100vh 足夠簡潔有效。
  • 如果頁面結構較為複雜，需要更靈活的佈局控制，可以考慮 Flexbox 或 Grid。
  • 儘量避免使用 JavaScript，除非其他方法無法滿足特殊需求。

補充說明:

  • 如果使用背景圖片，建議同時設定 background-size (例如 cover 或 contain) 和 background-position，以獲得最佳的顯示效果。
  • 確保背景元素的層級足夠低，以免遮擋頁面內容。

希望以上資訊能幫到你! 請根據你的具體情況選擇最合適的方法。

相關文章