ウェブサイトデザインのよくある質問は、「要素の高さを100％に設定するにはどうすればよいですか」です。
これは簡単な答えのように思えるかもしれません。 CSSを使用して要素の高さを100％に設定するだけでも、ブラウザウィンドウ全体に合わせてその要素を伸ばすとは限りません。なぜこれが起こり、このビジュアルスタイルを達成するために何ができるのかを見てみましょう。
ピクセルとパーセンテージ
CSSプロパティとピクセルを使用する値を使用して要素の高さを定義すると、その要素はブラウザの垂直方向の空間を占有します。たとえば、
高さ：100ピクセル。
あなたのデザインで100ピクセルの垂直スペースを占有します。ブラウザのウィンドウの大きさに関係なく、この要素の高さは100ピクセルになります。 パーセンテージはピクセルとは異なる働きをします。 W3C仕様によれば、パーセンテージの高さはコンテナの高さに関して計算されます。だから、段落を 高さ：50％;
高さが100ピクセルのdiv内では、段落の高さは50ピクセルになります。これは親要素の50％です。 ウェブページをデザインしていて、ウィンドウの高さを最大限に利用したいというコラムがある場合、自然な傾向は、 高さ：100％;
その要素に結局のところ、あなたが 幅
に 幅：100％;
要素はページの完全な水平スペースを占めるため、 高さ
同じように動作するはずですか？残念ながら、これはまったく当てはまりません。 なぜこのようなことが起こるかを理解するには、ブラウザが高さと幅を解釈する方法を理解する必要があります。 Webブラウザは、利用可能な合計幅をブラウザウィンドウの幅に応じて計算します。 幅
ドキュメントに値を設定しないと、ブラウザはウィンドウの幅全体を満たすようにコンテンツを自動的に流します（デフォルトは100％の幅です）。 高さの値は幅とは異なって計算されます。実際には、コンテンツがビューポートの外に出るほど長くない場合（つまり、スクロールバーが必要な場合）、またはWebデザイナーがページ上の要素の絶対値を設定しない限り、ブラウザーは高さを評価しません。 高さ
それ以外の場合、ブラウザはコンテンツが最後に来るまでビューポートの幅内にフローさせます。高さは実際には全く計算されません。 高さが設定されていない親要素を持つ要素にパーセンテージの高さを設定すると、問題が発生します。つまり、親要素にデフォルトが設定されています。 高さ：自動;
実際には、ブラウザに未定義の値から高さを計算するよう要求しています。これはnull値に等しいので、結果としてブラウザは何もしません。 ウェブページの高さをパーセンテージに設定する場合は、高さを設定する必要があります すべて 高さを定義したい要素の親要素。つまり、次のようなページがあるとします。 ここのコンテンツ
おそらく div
その段落の高さは100％ですが、そのdivは実際には 二 親要素： そして。高さを定義するために div
相対的な高さに設定するには、 体
そして html
要素も同様です。だから、divだけでなくbody要素とHTML要素の高さを設定するには、CSSを使う必要があります。 100％の高さに設定されているすべてのものをすばやく圧倒することができ、この効果を達成するためにのみ、これは難しいことです。 あなたのページ要素の高さを100％に設定する方法を知ったので、外出してすべてのページにするのは面白いかもしれませんが、知っておくべきことがいくつかあります： これを修正するには、要素の高さを設定することもできます。それを設定した場合 自動、
スクロールバーが必要な場合は表示され、スクロールバーが表示されていない場合は消えます。視覚的なブレークは修正されますが、スクロールバーが追加されていてもかまいません。 この課題に取り組むもう一つの方法は、CSSビューポートユニットで実験することです。ビューポートの高さ単位を使用することで、ビューポートの定義された高さになるように要素のサイズを設定できます。これは、100％高さのビジュアルをページ上に表示するには最適な方法ですが、さまざまなデバイスや画面サイズに対して柔軟に対応できます。 パーセンテージの高さが失敗する理由
100％の高さで作業するときの注意点
ビューポート単位の使用
