ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS: 高さ: 100% 失敗の理由、効果的な方法_html/css_WEB-ITnose
CSS: 高さ: 100% 失敗の理由、効果的な方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:27:001721ブラウズ
ページ要素の高さを 100% に設定すると、要素がブラウザ ウィンドウの高さ全体を埋めることが期待されますが、ほとんどの場合、このアプローチは効果がありません。 height:100% がなぜ機能しないのかご存知ですか?
常識によれば、CSS の高さ属性を使用して要素の高さを定義する場合、要素は設定どおりにブラウザの垂直スペース内の対応するスペース距離を拡張する必要があります。たとえば、div 要素の CSS が height: 100px; の場合、ページの垂直方向のスペースで 100px の高さを占有する必要があります。
W3C 仕様に従って、パーセンテージの高さは、この要素の親要素コンテナーの高さに応じて設定する必要があります。したがって、div の高さを height: 50%; に設定し、その親要素の高さが 100 ピクセルの場合、div の高さは 50 ピクセルになります。
それでは、height:100%; が機能しないのはなぜですか
ページをデザインするときに、その中に div 要素を配置し、それがウィンドウの高さ全体を占めるようにしたい場合、最も自然な方法は、この div に高さを追加することです: 100。 %; css 属性。ただし、幅を width: 100%; に設定すると、要素の幅はすぐにウィンドウの水平幅全体に拡張されます。身長でも同じことが起こりますか？
違います。
その理由を理解するには、ブラウザが高さと幅をどのように計算するかを理解する必要があります。 Web ブラウザは、有効幅を計算するときにブラウザ ウィンドウの開いた幅を考慮します。幅のデフォルト値を設定しない場合、ブラウザは水平幅全体を埋めるようにページ コンテンツを自動的に並べて表示します。
でも、身長の計算方法は全く違います。実際、ブラウザは、コンテンツがビューポートの範囲を超える (スクロール バーが表示される) 場合を除き、コンテンツの高さをまったく計算しません。または、ページ全体の絶対的な高さを設定します。そうしないと、ブラウザはコンテンツを単に積み上げていき、ページの高さをまったく考慮する必要がなくなります。
ページにはデフォルトの高さの値がないため、要素の高さをパーセントの高さに設定すると、親要素の高さを取得できず、独自の高さを計算することもできません。つまり、親要素の高さは単なるデフォルト値、height: auto; です。このようなデフォルト値に基づいて高さのパーセンテージを計算するようにブラウザに依頼すると、未定義の結果しか得られません。つまり、null 値であり、ブラウザはこの値に対していかなる反応も行いません。
デモを見る
上記のデモの例では、親要素が固定の高さを設定していないため、子要素の高さの高さ: 100% は機能しません。子要素の高さは、親要素の背景色に基づいて 100% ではないことがわかります。
したがって、要素の高さのパーセンテージ: 100% を機能させたい場合は、この要素のすべての親要素の高さに有効な値を設定する必要があります。つまり、これを行う必要があります:
<html> <body> <div style="height: 100%;"> <p> 想让这个div高度为 100% 。 </p> </div> </body></html>
これで、この div の高さは 100% になり、2 つの親要素 6c04bd5ca3fcae76e30b72ad730ca86d と 100db36a723c770d327fc0aef2ce13b1 が追加されました。 div の高さの割合を機能させるには、6c04bd5ca3fcae76e30b72ad730ca86d と 100db36a723c770d327fc0aef2ce13b1 の高さを設定する必要があります。
<html style="height: 100%;"> <body style="height: 100%;"> <div style="height: 100%;"> <p> 这样这个div的高度就会100%了 </p> </div> </body></html>
デモをご覧ください
このデモから、高さ: 100% が機能することがわかります。
高さを 100% に設定する場合の注意事項:
1. 余白とパディングによりページにスクロール バーが表示されますが、これは希望どおりではない可能性があります。
2. 要素の実際の高さが設定した高さの割合より大きい場合、要素の高さは自動的に拡張されます。