高さ:100% が機能しないのはなぜですか?

この知識は不人気ではありませんが、使用する際には混乱するかもしれません。うまくいかないときは検索すれば答えが見つかりますが、本当に理解していますか？フルスクリーン要素を設定するときに、高さが % で制御されないのはなぜですか?

1. 幅と高さのパーセンテージを設定する

w3c の幅と高さの属性によれば、幅と高さは親要素の幅と高さに応じて設定されていることが明確にわかります。
https://www.w3school.com.cn/cssref/pr_dim_width.asp
https://www.w3school.com.cn/cssref/pr_dim_height.asp

2.幅:100%;

このようなコードを記述し、要素を観察しやすくするために背景色をランダムに設定します。次のコードに注意してください。<!DOCTYPE html> を追加することを忘れないでください。そうしないと、結果が異なります。

<本文>
    <div スタイル="幅:100%;高さ:100%;背景色:青紫;">
    幅:100%;高さ:100%;
    </div>
</本文>
// 幅は 100% ですが、表示される高さは 100% ではなく font-size に属します。

<本文>
    <div style="width:100%;height:200px;background-color:blueviolet;">
    幅:100%;高さ:200px;
    </div>
</本文>
//効果は次のようになります

幅を 100% にするのは簡単ですが、高さを % 比率で設定することはできません (要素が消えてしまいます)。なぜでしょうか?

3. ブラウザは高さと幅をどのように計算しますか?

Web ブラウザは、有効な幅を計算するときにブラウザウィンドウの開いた幅を考慮します。幅にデフォルト値を設定しない場合、ブラウザは自動的にページコンテンツを水平幅全体を埋めるように並べて表示します。つまり、幅を設定しないと、次のように水平方向の幅全体が自動的に埋められます。

<div style="height:100%;">高さ:100%;</div>

しかし、高さの計算方法はまったく異なります。実際、ブラウザは、コンテンツがビューポートを超えない限り (スクロールバーが表示される場合)、コンテンツの高さをまったく計算しません。または、ページ全体の絶対的な高さを設定します。そうしないと、ブラウザはページの高さをまったく考慮せずにコンテンツをそのまま積み重ねてしまいます。
ページにはデフォルトの高さの値がないため、要素の高さをパーセンテージで設定すると、親要素の高さを取得できず、その要素自体の高さを計算できません。
つまり、親要素の高さは単なるデフォルト値、つまり height: auto; です。height: 100% を設定すると、ブラウザにそのようなデフォルト値に基づいてパーセンテージの高さを計算するように要求し、未定義の結果しか得られません。つまり、null 値であり、ブラウザはこの値に応答しません。
ブラウザによって幅と高さの解釈が異なるため、自分で検索することができます。

4. 解決方法

これで、% は親要素を基準に計算された高さであることがわかりました。これを有効にするには、親要素の高さを設定する必要があります。
注意すべき点は、<body> 内の要素の親要素は <body> だけでなく <html> でもあるということです。
したがって、両方の高さを同時に設定する必要があります。どちらか一方だけを設定しても機能しません。

 html,本文{
            高さ: 100%;
            マージン: 0;
            パディング: 0;
        }

5.行の高さの中央揃えに関する誤解?

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        html,本文{
            高さ: 100%;
            マージン: 0;
            パディング: 0;
        }
        div {
            色: 白;
            テキスト配置: 中央;
            フォントサイズ: 30px;
            行の高さ: 100%;
            背景色: 青紫;
        }
    </スタイル>
</head>

<本文>
    <!-- <div style="width:100%;height:100%;">幅:100%;高さ:100%;</div> -->
    <div style="height:100%;">高さ:100%;</div>
    <!-- <div style="width:100%;height:200px;">幅:100%;高さ:200px;</div> -->
</本文>

</html>

コードはすべて上記のとおりです。行の高さが 100% に設定されているのに、中央に配置されていないことがわかります。これはなぜでしょうか。このときの % はフォントサイズに対する相対値であるためです。したがって、絶対的な高さを持たない要素に直接作用することはできません。

行の高さプロパティの説明: https://www.w3school.com.cn/cssref/pr_dim_line-height.asp

このとき中央揃えにしたい場合は、以下のように高さ用と中央揃え用のdivをネストします。あまり使われていないようですが、中央揃えはやはり効果的です～

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        html,
        体 {
            高さ: 100%;
            マージン: 0;
            パディング: 0;
        }

        .div1 {
            背景色: 青紫;
            位置: 相対的;
        }

        .div2 {
            フォントサイズ: 30px;    
            色: 白;
            テキスト配置: 中央;                    
            幅: 400ピクセル;
            位置: 絶対;
            左: 50%;
            上位: 50%;
            変換: translateX(-50%) translateY(-50%);
        }
    </スタイル>
</head>

<本文>
    <!-- <div style="width:100%;height:100%;">幅:100%;高さ:100%;</div> -->
    <div スタイル="高さ:100%;" クラス="div1">
        <div class="div2">高さ:100%;</div>
    </div>
    <!-- <div style="width:100%;height:200px;">幅:100%;高さ:200px;</div> -->
</本文>

</html>

6. ソースコード

https://github.com/JiaXinYi/ife-study/blob/master/height/height.html

交通機関のリンク:

(...) フロントエンドの知識 - 記述した height:100% が機能しないのはなぜですか? _Know why - フロントエンド - SegmentFault

この記事は、あなたが書いた height:100% が機能しない理由についての説明はこれで終わりです。height:100% が機能しない理由に関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: html-webpack-plugin の使用方法の詳細な説明

>>: 文字列の GBK および GB2312 エンコードとデコードのフロントエンド実装 (概要)