ホームページ > 記事 > ウェブフロントエンド > html要素とbody要素の高さの問題を解決する方法
html要素とbody要素の高さの問題を解決する方法
- 云罗郡主転載
- 2018-11-23 15:46:113189ブラウズ
この記事の内容は、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 サイトの他の関連記事を参照してください。