高度或最小高度：哪一個最適合 HTML 和 Body 元素佈局？

佈局中HTML 和Body 元素的高度與最小高度

設定佈局時，開發人員通常會採用以下任一高度：100%或min-height: 100% 對於html 和body 元素。然而，這些方法在某些情況下經常會失敗，讓設計師想知道哪種方法更可取。

Height: 100%

在 html 和 body 上都使用 height: 100%元素將它們固定到視口高度。此方法有效地套用填滿整個瀏覽器視窗的背景圖像。但是，它會阻止正文隨著內容的增長而擴展，從而導致視口折疊下方出現不必要的間隙。

最小高度：100%

指定最小高度： html 和 body 元素上的 100% 確保 body 可以擴展到視口高度，從而允許滾動內容。但是，此方法僅在 html 具有明確高度的情況下才有效。

建議方法

對於填充瀏覽器視窗的背景圖像，建議的解決方案是：

html {
  height: 100%;
}

body {
  min-height: 100%;
}

這種方法允許html 確定視口高度和主體根據需要擴展，避免間隙和內容溢出。

其他注意事項

Html 和 body 缺乏固有高度，因此預設分配顯式 height: auto 。套用於這些元素的背景影像必須在 html 中明確指定，因為 html 從視窗匯出其高度。

雖然 min-height: 100% 沒有明確的 html 高度可能會導致意外的行為，但請了解 CSS 規範 ( CSS2.1 第 10 節）對這些技術細節進行了詳盡的解釋。

以上是高度或最小高度：哪一個最適合 HTML 和 Body 元素佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！