特定の DOCTYPE 宣言により、高さ 100% のテーブルと div が動作しなくなるのはなぜですか?

StackOverflow https://stackoverflow.com/questions/1997842

質問

いくつかあるように私には思えます DOCTYPE IE (6-8) での宣言により、ブラウザが無視する可能性があります。 height="100%" テーブルと div について (style="height:100%")

例えば

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>Test1</title>
 </head>
 <body>
  <div style="border: 2px solid red; height: 100%">
  Hello World
  </div>
 </body>
</html>

をレンダリングします DIV テキストの高さによっては伸びません。の削除 DOCTYPE 宣言により、 DIV 必要に応じて垂直方向に伸縮します。

そこで私の質問は次のとおりです。

  1. なぜそれが起こるのでしょうか？
  2. どうやって保管していますか DOCTYPE そして まだ テーブルが伸びることを許可しますか?
  3. それはあなたに起こりましたか?
  4. ご存知ですか？、よく知られていますか？
役に立ちましたか？

解決

  1. 古代のブラウザは奇妙で一貫性のない動作をしており、ブラウザは Doctype を次のように扱っていたためです。 知能検査 作者が標準に準拠してコードを作成しているのか、それとも 10 年前に W3Schools から学んだことに準拠してコードを作成しているのかを確認するためです。あなたが持っている場合 height: 100% 親要素の高さは auto それから 100% 手段 auto.

  2. 一般的にはそうではありません。それは叫びます」レイアウトテーブル」。ただし、html 要素と body 要素で高さまたは最小の高さを設定します。他にもテクニックはありますが、奇妙なことに、私はそのテクニックを必要とする立場に一度も行ったことがないので、現時点では便利なリンクを持っていません。

  3. それはブラウザが行うべきことなので…

  4. さて、私はこの質問に答えています…

他のヒント

この「問題」への真の解決策は、以下のCSSを使用したことになります 

html, body {
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;
}

#mydiv {
    height: 100%;
}

しかし境界は高さを追加することを覚えています。

あなたはDOCTYPEを削除すると、

ブラウザは、ヘルプを別々に正しくレンダリングするために検証されていない古いコードをのことを行い癖モードになります。

あなたはコンテナ要素の上に高さを設定する必要があり、100％の高さを持つdiv要素がないので、継承の高さ：自動;

あなたは厳密に移行からの切り替えを試みることができるが、私は、これはあなたの問題を解決しないだろう。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top