為什麼刪除 DOCTYPE 聲明可以使其工作？ " >如何在不刪除 DOCTYPE 聲明的情況下讓 div 填滿頁面？
如何在不刪除 DOCTYPE 聲明的情況下讓 div 填入頁面？ DOCTYPE，只需將根元素（html）的高度設定為100%:
html { height: 100%; }為什麼刪除 DOCTYPE 聲明可以使其工作？
為什麼 100% 高度的 div 僅在刪除 DOCTYPE 後才填入頁面？
為什麼刪除 DOCTYPE 後高 100% 會運作？
此程式碼片段嘗試用綠色填滿整個頁面div:
<!DOCTYPE HTML> <html> <body>
但是，它並沒有按預期工作。 div 仍然不可見。如果我們刪除 DOCTYPE 聲明 ()，div 會突然擴展以填入整個頁面。這就提出了兩個問題：
如何在不刪除 DOCTYPE 聲明的情況下讓 div 填滿頁面？
如何在不刪除 DOCTYPE 聲明的情況下讓 div 填入頁面？ DOCTYPE，只需將根元素（html）的高度設定為100%:
html { height: 100%; }為什麼刪除 DOCTYPE 聲明可以使其工作？
當存在 DOCTYPE 時，瀏覽器會依照標準呈現頁面模式。在標準模式下，如果父元素沒有明確的高度，則子元素的百分比高度將被視為 height: auto。這就是為什麼 div 在標準模式下無法填充頁面的原因。
但是，當 DOCTYPE 不存在時，瀏覽器會切換到怪異模式。在怪異模式下，子元素的百分比高度是相對於視口測量的。這意味著上例中的 div 將以怪異模式填滿整個頁面，因為其高度設定為視窗高度的 100%。
結論
始終包含 DOCTYPE 聲明以確保頁面以標準模式呈現非常重要。 Quirks 模式是不可靠且不可預測的，應該不惜一切代價避免它。首選的 DOCTYPE 聲明很簡單：
<!DOCTYPE html>
以上是為什麼 100% 高度的 div 僅在刪除 DOCTYPE 後才填入頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用HTML，CSS和JavaScript創建動畫倒計時計時器
Apr 11, 2025 am 11:29 AM
您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多
當您看上去時，CSS梯度變得更好
Apr 11, 2025 am 09:16 AM
我關注的一件事是Lea Verou＆＃039; s conic-Gradient（）Polyfill的功能列表是最後一項：
