佈局中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中文網其他相關文章!