html要素とbody要素の高さの問題を解決する方法-htmlチュートリアル-php.cn

html要素とbody要素の高さの問題を解決する方法

云罗郡主

リリース： 2018-11-23 15:46:11

転載

3234 人が閲覧しました

この記事の内容は、html 要素と body 要素の高さの問題を解決する方法についてです。必要な方は参考にしていただければ幸いです。

html要素とbody要素の高さの問題を解決する方法

まず第一に、html 要素と body 要素は両方ともブロックレベルの要素です。

簡単な説明: height: 100% が設定されていない場合がありますが、html 要素と body 要素の高さは現在のウィンドウの高さになります。height: 100% が設定されているように見えます。

次の 2 つの例を見てください。

例 1:

<html>
<head>
<title>demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
height: 30%;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>

ログイン後にコピー

この時点で、コンテナの高さはウィンドウの高さの 30% であり、コンテナの高さはウィンドウの高さの 30% です。 html 要素と body 要素は両方ともウィンドウの高さです。

例 2:

<!DOCTYPE html>
<html>
  <head>
    <title>demo</title>
    <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      height: 30%;
    }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

ログイン後にコピー

この時点では、コンテナの高さは 0 で、設定された高さ: 30% は有効になりません。html 要素と body 要素の高さは両方とも0.

理由: 例 1 では現在のドキュメントタイプが設定されず、互換モードはデフォルトで有効になっていますが、互換モードの html 要素と body 要素の高さはウィンドウの高さになります。一方、例 2 ではウィンドウの高さが設定されます。を指定すると、標準モードが有効になり、標準モードの html 要素と body 要素の高さは両方とも 0 になります。

上記は、html 要素と body 要素の高さの問題を解決する方法の完全な紹介です。Html5 チュートリアルについて詳しく知りたい場合は、PHP に注目してください。中国語のウェブサイト。

以上がhtml要素とbody要素の高さの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。