如何讓 DIV 填滿整個頁面高度，即使是空的？

如何強制DIV 塊垂直填充頁面，即使沒有內容

在某些情況下，您可能會遇到需要的場景一個DIV 區塊，無論其內容如何，都會擴展到頁面底部。以下是實現此目的的方法：

問題：

當DIV 區塊沒有內容時，它通常會折疊以僅佔據其邊框和所需的垂直空間。填充。因此，它可能不會延伸到頁面底部，留下空白空間。

解決方案：

強制DIV 塊垂直填充頁面，解決以下問題：

1. 容器元素的高度：如果容器元素DIV 區塊周圍的部分（例如主體或父div）的高度未設定為100%，其中的 DIV 塊不能超出容器的高度。因此，設定高度：100%； HTML 和body 元素的屬性：

html, body {
  height: 100%;
}

2. 邊距和填充：確保沒有額外的邊距或填充添加到DIV 區塊或其會阻止其完全擴展的容器。

透過執行以下步驟，DIV 區塊現在將擴展到頁面底部，即使它沒有內容。但請注意，瀏覽器相容性和 Quirks 模式可能會影響最終結果，因此請參閱 quirksmode.org 等資源以進行進一步調整。

以上是如何讓 DIV 填滿整個頁面高度，即使是空的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！