2

(すべて最新の firefox でテストされています。)

この html コードは、ほぼ画面いっぱいの赤いボックスを作成します。

<html>
<head>
</head>
<body>
  <div style="height:100%;background-color:red;"></div>
</body>
</html>

ただし、doctype 宣言を追加すると、相対的な高さが無効になり、div の高さがゼロになります。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div style="height:100%;background-color:red;"></div>
</body>
</html>

どうしてこれなの？特に、Doctype のないドキュメントで相対的な高さをブラウザーが考慮する理由がわかりません。

4

3 に答える 3

4

Doctype は、ブラウザーの特定の標準セットを強制します。ページに doctype が含まれていない場合、ブラウザは通常、マークアップのミスに対してより寛大な、ある種の癖または遷移モードを使用します (ただし、悪い習慣であり、アイテムを正しく表示しない場合があります)。

基本的に、厳密に言えば、そのブラウザーの一連の標準を使用して、その要素を高さ 100% に設定することはできません。doctype が含まれていない場合、または移行用の doctype が含まれている場合に何をしたいのかを予測し、それに応じてページのスタイルを調整しようとします。

于 2013-05-24T12:22:47.230 に答える
3

この方法で行うことができます：http://cdpn.io/aHlCd

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

html, body {height: 100%; margin: 0; padding: 0;}
div {min-height: 100%; background: red;}

</style>

</head>
<body>

<div></div>

</body>
</html>

min-height ではなく、div に高さを設定することもできます。

于 2013-05-24T13:12:25.420 に答える
0

上記は、修正を探している場合、位置を絶対に設定し、上、右、左、下を適用することでうまくいく理由に対する答えです。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div style="position: absolute;height:100%;background-color:red;bottom: 0;top: 0;right: 0;left: 0"></div>
</body>
</html>
于 2013-05-24T12:41:27.260 に答える