ホームページ > 記事 > ウェブフロントエンド > CSS で height:100% を操作して機能させる方法
CSS で height:100% を操作して機能させる方法
- 巴扎黑オリジナル
- 2017-06-28 10:02:101561ブラウズ
ページ要素の高さを 100% に設定すると、要素がブラウザ ウィンドウの高さ全体を埋めることが期待されますが、ほとんどの場合、このアプローチは効果がありません。 height:100%不起作用吗？
按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个pheight:100%が機能しない理由を知っていますか?
pp要素のCSSがheightの場合:
100px; の場合、ページの垂直方向のスペースで 100px を占める必要があります。
高さ: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% それもうまくいきません。親要素の背景色から子要素の高さが
ではないと判断できます。 それで、要素の高さのパーセンテージを設定したい場合
<html>
<body>
<p style="height: 100%;">
<p>
想让这个p高度为 100% 。 </p>
</p>
</body></html>今度は、この p的高度为100%，它有两个父元素6c04bd5ca3fcae76e30b72ad730ca86d和100db36a723c770d327fc0aef2ce13b1。为了让你的p的百分比高度能起作用，你必须设定6c04bd5ca3fcae76e30b72ad730ca86d和100db36a723c770d327fc0aef2ce13b1 の高さを指定します。
<html style="height: 100%;">
<body style="height: 100%;">
<p style="height: 100%;">
<p>
这样这个p的高度就会100%了 </p>
</p>
</body></html>このデモからわかるように、高さ:
100%;うまくいきます。
使用中の高さ:
100%;注意が必要な点がいくつかあります
1. 余白とパディングにより、ページにスクロール バーが表示されますが、これは希望どおりではない可能性があります。
2. 要素の実際の高さが設定した高さの割合より大きい場合、要素の高さは自動的に拡張されます。
以上がCSS で height:100% を操作して機能させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。