CSS で height:100% を操作して機能させる方法-CSSチュートリアル-php.cn

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

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS で height:100% を操作して機能させる方法

巴扎黑

Jun 28, 2017 am 10:02 AM

100% height

ページ要素の高さを 100% に設定すると、要素がブラウザウィンドウの高さ全体を埋めることが期待されますが、ほとんどの場合、このアプローチは効果がありません。 height:100%不起作用吗？

按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个pheight:100%が機能しない理由を知っていますか?

常識によれば、CSS の高さ属性を使用して高さを定義する場合、要素。この要素は、設定に従って、ブラウザの垂直スペース内の対応するスペース距離を拡張する必要があります。たとえば、

pp要素のCSSがheightの場合: 100px; の場合、ページの垂直方向のスペースで 100px を占める必要があります。

🎜 W3C 仕様に従って、この要素の親要素コンテナーの高さに応じて高さのパーセンテージを設定する必要があります。したがって、 🎜p🎜 の高さを 🎜height に設定すると、次のようになります。 50%;🎜、その親要素の高さが 100px である場合、この p の高さは 50px である必要があります。 🎜

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

ページをデザインするとき、p元素，你希望它占满整个窗口高度，最自然的做法，你会给这个paddheight: 100%; CSS 属性。ただし、幅を <a href="http://www.php.cn/wiki/835.html" target="_blank">width</a> に設定すると、次のようになります。 100%; の場合、この要素の幅はすぐにウィンドウの水平幅全体に拡張されます。身長でも同じことが起こりますか？

違います。

その理由を理解するには、ブラウザが高さと幅をどのように計算するかを理解する必要があります。 Web ブラウザは、有効幅を計算するときにブラウザウィンドウの開いた幅を考慮します。幅のデフォルト値を設定しない場合、ブラウザは水平幅全体を埋めるようにページコンテンツを自動的に並べて表示します。

でも、身長の計算方法は全く違います。実際、ブラウザは、コンテンツがビューポートの範囲を超える (スクロールバーが表示される) 場合を除き、コンテンツの高さをまったく計算しません。または、ページ全体の絶対的な高さを設定します。そうしないと、ブラウザはコンテンツを単に積み上げていき、ページの高さをまったく考慮する必要がなくなります。

ページにはデフォルトの高さの値がないため、要素の高さをパーセントの高さに設定すると、親要素の高さを取得できないため、独自の高さを計算できません。言い換えれば、親要素の高さは単なるデフォルト値です: height: 自動;。このようなデフォルト値に基づいて高さのパーセンテージを計算するようにブラウザに要求すると、結果は undefined未定義しか得られません。つまり、null

値であり、ブラウザはこの値に対していかなる反応も行いません。

上記のデモンストレーション例では、親要素が固定の高さを設定していないため、子要素の高さheight: 100%100% それもうまくいきません。親要素の背景色から子要素の高さが

100%

ではないと判断できます。それで、要素の高さのパーセンテージを設定したい場合

高さ: 100%;🎜これを機能させるには、この要素のすべての親要素の高さに有効な値を設定する必要があります。つまり、次のようにする必要があります: 🎜

<html>
  <body>
    <p style="height: 100%;">
      <p>
        想让这个p高度为 100% 。      </p>
    </p>
  </body></html>

ログイン後にコピー

今度は、この p的高度为100%，它有两个父元素<body>和<html>。为了让你的p的百分比高度能起作用，你必须设定<body>和<html> の高さを指定します。

<html style="height: 100%;">
  <body style="height: 100%;">
    <p style="height: 100%;">
      <p>
        这样这个p的高度就会100%了      </p>
    </p>
  </body></html>

ログイン後にコピー

このデモからわかるように、高さ: 100%;うまくいきます。