web-dev-qa-db-ja.com

DOCTYPEが削除された場合にのみdivの高さが100％機能するのはなぜですか？

これはコード全体です：

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

何も表示されません。しかし、最初の行（doctype）を削除すると、期待どおりにすべてのページが緑色になります。

2つの質問があります：

  1. タグを削除せずにdivをページ全体に表示するにはどうすればよいですか？
  2. doctypeを削除すると機能するのはなぜですか？
csshtmldoctypequirks-mode
21
MohammadHossein R

CSS heightプロパティ、パーセンテージ値、およびDOCTYPE

divに100％の高さを適用する方法を尋ねる質問の最初の部分は、他の人から何度か回答されています。基本的に、ルート要素の高さを宣言します。

html { height: 100%; }

完全な説明はここにあります：

あなたの質問の2番目の部分はあまり注目されていません。私はそれに答えようとします。

doctypeを削除すると[緑の背景]が機能するのはなぜですか？

DOCTYPE（ 文書型宣言 ）を削除すると、ブラウザは標準モードからに切り替わります。 ）quirksモード。

quirks mode （別名 compatibility mode ）では、ブラウザは古いブラウザをシミュレートして、古いWebページ（Web標準が登場する前に作成されたページ）を解析できるようにします。癖モードのブラウザは、 IE4 、 IE5およびナビゲーター4 のふりをするため、作成者が意図したとおりに古いコードをレンダリングできます。

Wikipedia が癖モードを定義する方法は次のとおりです。

コンピューティングにおいて、癖モードとは、標準モードのW3CおよびIETF標準に厳密に準拠するのではなく、古いブラウザ用に設計されたWebページとの下位互換性を維持するために一部のWebブラウザで使用される手法を指します。

これが [〜＃〜] mdn [〜＃〜] の見解です：

昔のWebでは、ページは通常2つのバージョンで作成されていました。1つはNetscape Navigator用、もう1つはMicrosoft InternetExplorer用です。 Web標準がW3Cで作成されたとき、ブラウザはそれらを使い始めることができませんでした。そうすると、Web上のほとんどの既存のサイトが壊れてしまうからです。したがって、ブラウザは2つのモードを導入して、新しい標準に準拠したサイトを古いレガシーサイトとは異なる方法で処理します。

ここで、コードのheight: 100%がquirksモードで機能するが、標準モードでは機能しない具体的な理由は次のとおりです。

標準モード では、親要素にheight: auto（高さが定義されていない）がある場合、子要素の高さのパーセンテージもheight: autoとして扱われます（ 仕様に従って ）。

これが、最初の質問に対する答えがhtml { height: 100%; }である理由です。

height: 100%をdivで機能させるには、親要素にheightを設定する必要があります（ 詳細 ）。

ただし、癖モードでは、親要素にheight: autoがある場合、子要素の高さのパーセンテージが測定されますビューポートに対する。

この動作をカバーする3つのリファレンスを次に示します。

TL; DR

開発者が簡単に知っておくべきことは次のとおりです。

癖モードのブラウザは、予測不可能、信頼性が低く、多くの場合望ましくない方法でWebページをレンダリングします。したがって、は、ドキュメントを 標準モード でレンダリングするために常にDOCTYPEを含めます。

適切なDOCTYPEを選択することは、以前はあいまいでやや紛らわしいプロセスでした 多くのDOCTYPEバージョンから選択 。しかし、今日のプロセスは相変わらず簡単です。使用するだけ：

<!DOCTYPE html>
46
Michael_B

縦の意味ですか？ divはブロックレベルの要素であるため、デフォルトでは親を水平方向に埋めます。

これを機能させるには、HTMLタグの高さも100％にする必要があります。

html, body { height:100%; }

実用的なサンプルについては、こちらをご覧ください。

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

ここで他の何人かが述べているように、最初の行（HTML5 doctype）を削除すると、ブラウザーは別の方法でページをレンダリングします。その場合、HTMLタグに100％の明示的な高さを指定する必要はありません。

9
HaukurHaf

<html>タグと<body>タグの幅と高さも100％に設定する必要があります。これは、<div>の幅と高さを100％に割り当てると、親要素の全幅と高さを割り当てています。この場合、<div>の親要素は<body>であり、<body>の親要素は<html>です。

<!DOCTYPE html>タグを削除すると、なぜ機能するのですか？

<!DOCTYPE html>タグを削除すると、ブラウザはページをさまざまな方法でレンダリングし、他の結果を表示するためです。

5
Arjun

HTML5 doctypeでは、html要素の高さも設定する必要があります。

html {
    height:100%;
}
5
j08691

ページを埋めるには、htmlタグとbodyタグの高さを100％にする必要があります。

css：

html, body{
  height: 100%;
}
2
dinomix