BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】height:100%と書いても効かない理由

2022-01-21 02:49:16

height:100が機能しないのはなぜですか？

この知識は決して冷たいものではありませんが、それでも使っていてちょっと戸惑うことがありますし、うまくいかないときに検索すれば答えは出てきますが、本当に理解していますか？フルスクリーン要素を設定したいのに、なぜ高さが%で制御されないのか？

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

w3cのwidthとheightの属性に従うと、%で設定された幅と高さは、親要素の幅と高さに基づくことが明らかである：。
https://www.w3school.com.cn/cssref/pr_dim_width.asp
https://www.w3school.com.cn/cssref/pr_dim_height.asp

2.幅：100%。

このコードは、要素を見やすくするために、ランダムな背景色を設定するために書きました。以下のコードに注意してください。また、<!DOCTYPE html>を追加することを忘れないでください。 

<body>
    <div style="width:100%;height:100%;background-color:blueviolet;">
    width:100%;height:100%;
    </div>
</body>
//width 100%, the height we now see is part of font-size, not 100%.



<body>
    <div style="width:100%;height:200px;background-color:blueviolet;">
    width:100%;height:200px;
    </div>
</body>
//The effect is as follows

基本的に横幅100%は簡単に実現できることがわかりますが、ここでは高さを%比率にすることができません（要素が見えなくなる）、なぜでしょうか？

3. ブラウザの高さ・幅の計算方法

ウェブブラウザは、有効幅を計算する際に、ブラウザウィンドウの開いている幅を考慮します。幅のデフォルトを何も設定しない場合、ブラウザは自動的に横幅全体をページコンテンツがタイル状になるように埋めることになります。つまり、以下のように、幅を設定しなければ、自動的に横幅全体を埋めることになります。 

<div style="height:100%;">height:100%;& Turkey;</div>

しかし、高さの計算方法は全く異なります。実際、ブラウザはコンテンツの高さをまったく計算しません。コンテンツがビューポートの外に出ない限り（スクロールバーが表示される）、です。あるいは、ページ全体の高さを絶対値で設定します。そうでない場合は、ブラウザは単にコンテンツを下に積み上げるだけで、ページの高さを考慮する必要すらありません。
ページには高さのデフォルト値がないため、要素の高さをパーセンテージで設定した場合、Turkey は親要素の高さを取得して自身の高さを計算することができないのです。
つまり、親の高さは、height: auto というデフォルト値でしかありません。height: 100% と設定すると、このようなデフォルト値に基づいて高さの割合を計算するようブラウザに求めていることになり、未定義の結果しか得られないのです。つまり、NULL値であり、ブラウザはこの値に対して反応しない。
幅と高さの解像度はブラウザによって異なりますので、ご自身で検索してください。

4. 解決方法

これで、%は親要素からの相対的な高さ計算であることがわかったと思いますが、これを有効にするためには、親要素の高さを設定する必要があります。
注意点としては、<body>の要素の親は<body>だけでなく、<html>も含まれることです。
そのため、両方の高さを設定する必要があり、どちらか一方だけを設定してもうまくいきません。 

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

5. ラインハイトのセンタリングについて少し誤解がある？ 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        div {
            color: white;
            text-align: center;
            font-size: 30px;
            line-height: 100%;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <! -- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->
    <div style="height:100%;">height:100%;</div>
    <! -- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->
</body>

</html>

フルコードは上記の通りですが、line-heightを100%に設定しても中央に配置されないことがわかります。これはなぜかというと、この時点では%はフォントサイズに対する相対的なものだからです? なので、高さが絶対値でない要素には直接効きません。

line-height 属性は、次のように記述します。 https://www.w3school.com.cn/cssref/pr_dim_line-height.asp

この時点でセンタリングするには、以下のように、高さ用とセンタリング用のdivを入れ子にして、そのような使い方はしない感じですが、それでもセンタリングは効きますよ〜。 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .div1 {
            background-color: blueviolet;
            position: relative;
        }

        .div2 {
            font-size: 30px;    
            color: white;
            text-align: center;                    
            width: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
    </style>
</head>

<body>
    <! -- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->
    <div style="height:100%;" class="div1">
        <div class="div2">height:100%;</div>
    </div>
    <! -- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->
</body>

</html>

6. ソースコード

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

リンクの移動

(...) フロントエンド豆知識 ～height:100%と書いても効かないのはなぜ？その正体を知る - フロントエンド - SegmentFault Think No

この記事では、height:100%がうまくいかないと書いた理由についてご紹介します。height:100% doesn't workについては、スクリプトハウスの過去記事を検索していただくか、引き続き下記の関連記事をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します