HTML 的「高度：100%」如何與百分比值配合以及 DOCTYPE 的影響？

HTML 的Height 屬性和百分比值

在HTML 中，可以將height 屬性設為百分比值來指定高度元素相對於其父元素。但是，這僅在父元素具有明確的高度設定時才有效。預設情況下，元素的隱式高度為“auto”，這意味著它們的高度是根據其內容自動決定的。

問題的第一部分，關於如何使div 填充無需刪除DOCTYPE 的頁面，可以透過修改CSS 以包含「html」元素的高度聲明來回答：

html {高度：100%; }<br>

此解決方案無需刪除DOCTYPE，確保頁面以標準模式呈現，而不會中斷高度功能。

怪異模式與標準模式

你的問題的第二部分，關於刪除DOCTYPE 的效果，深入研究了怪異模式和標準模式之間的區別。

當 DOCTYPE 時存在時，瀏覽器進入標準模式，該模式嚴格遵守 Web 標準。但是，如果省略 DOCTYPE，瀏覽器將切換到怪異模式，該模式會嘗試模擬舊版瀏覽器的行為。

在標準模式下，總是計算高度百分比相對於其父元素的高度。在您的範例中，由於 body 元素沒有明確的高度（它設定為“auto”），因此 div 的 100% 高度實際上被計算為“auto”，從而導致沒有可見內容。

相較之下，怪異模式的運作規則較可預測。在此模式下，div 的高度是相對於視窗高度計算的，允許 div 按預期填充整個頁面。

結論

僅當父元素定義了明確高度時，為div 設定100% 的高度值才能在標準模式下按預期工作。將 html 元素的高度設定為 100%，您可以確保正確計算頁面內的高度百分比。如果刪除 DOCTYPE，瀏覽器會切換到怪異模式，該模式會修改百分比的計算並允許 div 以 100% 的高度填充頁面，即使未明確指定其父級的高度也是如此。

以上是HTML 的「高度：100%」如何與百分比值配合以及 DOCTYPE 的影響？的詳細內容。更多資訊請關注PHP中文網其他相關文章！