這是完整的程式碼:
<!DOCTYPE HTML> <html> <body style="height: 100%; padding: 0; margin: 0;"> <div style="background-color: green; height: 100%; width: 100%"></div> </body> </html>
什麼也沒出現。但是,如果我刪除第一行(doctype
),所有頁面都會按預期變為綠色。
我有兩個問題:
div
填入頁面而不刪除該標記? doctype
就可以正常運作?
你是說垂直嗎? div 是區塊級元素,因此預設情況下它們會水平填入父元素。
為了使其正常運作,您還需要將 HTML 標記的高度設為 100%。
請參閱此處的工作範例:
http://jsfiddle.net/uhg0y9tm/1/
正如這裡其他一些人所說,一旦刪除第一行(HTML5 文件類型),瀏覽器將以不同的方式呈現頁面,在這種情況下,沒有必要為 HTML 標籤指定明確的高度100%。
CSS
height
屬性、百分比值和 DOCTYPE您的問題的第一部分詢問如何將 100% 高度應用到您的
div
,其他人已多次回答。本質上,宣告根元素的高度:完整的解釋可以在這裡找到:
height
屬性和百分比值。您問題的第二部分受到的關注要少得多。我會嘗試回答這個問題。
當您刪除 DOCTYPE(文件類型宣告)時,瀏覽器將從標準切換模式到怪異模式。
在怪異模式下,也稱為相容模式,瀏覽器模擬舊瀏覽器,以便它可以解析舊網頁 - 在網路標準出現之前編寫的頁面。處於怪異模式的瀏覽器會偽裝成 IE4,IE5 和 Navigator 4,以便它可以按照作者的意圖呈現舊程式碼。
以下是Wikipedia如何定義怪癖模式:
以下是 MDN 的觀點:
現在,以下是程式碼中的
height: 100%
在怪異模式下工作但在標準模式下不起作用的具體原因:在標準模式中,如果父元素具有
高度: auto
(沒有定義高度),那麼子元素的百分比高度也會被視為height: auto
(依照規範)。這就是為什麼你的第一個問題的答案是
html { height: 100%; }
.要讓
height: 100%
在div
中工作,您必須在父元素上設定height
(更多詳細資訊)。但是,在怪異模式下,如果父元素具有
height: auto
,則子元素的百分比高度將相對於視口進行測量。以下是涵蓋此行為的三個參考文獻:
TL;DR
簡而言之,以下是開發人員需要了解的內容: