如何讓div元素始終填滿整個螢幕高度？

保持全螢幕

無論內容如何

創建

;佔據整個螢幕垂直高度的元素，無論其內容如何，都是常見的Web 開發挑戰。這可行嗎？

解決方案

以下CSS 方法始終可以實現此效果：

html, body {
  height: 100%;
  margin: 0;
}

#wrapper {
  min-height: 100%;
}

此解決方案的工作原理：

• 將html 和body 元素的height 和margin 屬性設為 0以消除瀏覽器
• 將 #wrapper 元素的 min-height 設定為 100%，以確保它佔據所有可用的垂直空間。

附加說明

• 對於舊版的Internet Explorer（IE6 及以下），需要額外的CSS 規則來強制#wrapper 佔據整個螢幕高度。
• 如果需要，使用 min-height 代替 height 可以讓其他內容延伸到螢幕高度之外。

以上是如何讓div元素始終填滿整個螢幕高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！