DOCTYPE 聲明如何影響 CSS 高度百分比計算？

CSS 高度屬性、百分比值和DOCTYPE

當您為div 元素指定100% 的高度時，它可能會不會填充整個頁面，因為在標準模式下（當包含DOCTYPE 時），瀏覽器會應用相對於父元素的百分比高度。但是，如果刪除 DOCTYPE，瀏覽器會切換到怪異模式並解釋相對於視窗的 100% 高度。

使Div 填充頁面

為了確保您的div 填充頁面而不刪除DOCTYPE，請在根上聲明高度element:

為什麼刪除DOCTYPE 會影響高度計算

刪除DOCTYPE後，瀏覽器從標準模式切換到怪異模式。在怪異模式下，子元素的百分比高度計算方式不同：

• 標準模式：如果父元素的高度為auto，則子元素的百分比高度也被視為auto.
• Quirks 模式： 若父元素的高度為auto，則百分比高度為子元素是相對於視口測量的。

由於您沒有在 div 的父元素上設置高度，因此在怪異模式下，100% 高度是相對於視口測量的，導致綠色背景按預期填寫頁面。

a 的重要性DOCTYPE

使用 DOCTYPE 至關重要，因為它確保瀏覽器以標準模式呈現網頁。此模式遵循現代 Web 標準，保證在不同瀏覽器之間呈現一致且可靠的渲染。另一方面，Quirks 模式會模擬較舊的瀏覽器來適應舊版網頁，這可能會導致不可預測和不良的行為。

推薦的 DOCTYPE

對於 HTML5文檔，推薦的 DOCTYPE 很簡單：

以上是DOCTYPE 聲明如何影響 CSS 高度百分比計算？的詳細內容。更多資訊請關注PHP中文網其他相關文章！