為什麼高度 100% 在沒有 DOCTYPE 聲明的情況下起作用?
P粉818561682
P粉818561682 2023-10-26 10:39:42
1
2
663

這是完整的程式碼:

<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
    <div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>

什麼也沒出現。但是,如果我刪除第一行(doctype),所有頁面都會按預期變為綠色。

我有兩個問題:

  1. 如何讓 div 填入頁面而不刪除該標記?
  2. 為什麼刪除 doctype 就可以正常運作?


P粉818561682
P粉818561682

全部回覆(2)
P粉043432210

你是說垂直嗎? div 是區塊級元素,因此預設情況下它們會水平填入父元素。

為了使其正常運作,您還需要將 HTML 標記的高度設為 100%。

html, body { height:100%; }

請參閱此處的工作範例:

http://jsfiddle.net/uhg0y9tm/1/

正如這裡其他一些人所說,一旦刪除第一行(HTML5 文件類型),瀏覽器將以不同的方式呈現頁面,在這種情況下,沒有必要為 HTML 標籤指定明確的高度100%。

P粉904405941

CSS height 屬性、百分比值和 DOCTYPE

您的問題的第一部分詢問如何將 100% 高度應用到您的 div ,其他人已多次回答。本質上,宣告根元素的高度:

html { height: 100%; }

完整的解釋可以在這裡找到:


您問題的第二部分受到的關注要少得多。我會嘗試回答這個問題。

當您刪除 DOCTYPE(文件類型宣告)時,瀏覽器將從標準切換模式怪異模式

怪異模式下,也稱為相容模式,瀏覽器模擬舊瀏覽器,以便它可以解析舊網頁 - 在網路標準出現之前編寫的頁面。處於怪異模式的瀏覽器會偽裝成 IE4IE5 和 Navigator 4,以便它可以按照作者的意圖呈現舊程式碼。

以下是Wikipedia如何定義怪癖模式:

以下是 MDN 的觀點:

現在,以下是程式碼中的height: 100% 在怪異模式下工作但在標準模式下不起作用的具體原因:

標準模式中,如果父元素具有高度: auto(沒有定義高度),那麼子元素的百分比高度也會被視為height: auto (依照規範)。

這就是為什麼你的第一個問題的答案是 html { height: 100%; }.

要讓height: 100%div 中工作,您必須在父元素上設定height (更多詳細資訊)。

但是,在怪異模式下,如果父元素具有 height: auto,則子元素的百分比高度將相對於視口進行測量。

以下是涵蓋此行為的三個參考文獻:


TL;DR

簡而言之,以下是開發人員需要了解的內容:

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板