HTML 和正文高度：100% 與最小高度：100% – 我應該使用哪一個？

HTML 和正文元素的高度與最小高度：了解差異

在網頁設計中，實現填充瀏覽器視窗的版面至關重要。開發人員經常將 html 和 body 元素的高度設定為 100%，期望它擴展到整個視窗大小。然而，在某些情況下，這種方法會失敗。本文旨在闡明這個問題並提供建議的解決方案。

為什麼 Height: 100% 或 Min-Height: 100% 會失敗

將 html 和 body 都設定為 height: 100 % 防止 body 元素擴展到超出視窗高度。這會在頁面底部留下明顯的間隙，通常是不想要的結果。

另一方面，兩個元素上的 min-height: 100% 不起作用，因為帶百分比的 min-height 不適用到 body 元素，除非 html 定義了明確的高度。

建議的解決方案：Height: 100% on HTML，Min-Height: 100% on Body

要解決這些限制，建議將html 設定為height: 100%，將body 設定為min-height: 100%。這允許：

• html 擴展到視口的高度。
• body 擴充功能以適應頁面內容，同時保持最小高度為 100%。

背景圖像：特殊情況

將背景圖像應用於填充瀏覽器視窗的html 和body 時，兩者都不會height: 100% 和min-height: 100 % 都可以有效工作。相反，建議使用以下方法：

html {
  height: 100%;
}

body {
  min-height: 100%;
}

這允許背景圖像覆蓋整個瀏覽器窗口，沒有任何間隙或溢出。

以上是HTML 和正文高度：100% 與最小高度：100% – 我應該使用哪一個？的詳細內容。更多資訊請關注PHP中文網其他相關文章！