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