CSS を使用して HTML 要素の高さを 100% に設定する方法
CSS でパーセンテージを使用して高さを設定する方法を学ぶ
パーセント値 CSS トリッキーな場合があります。高さを設定すると CSS プロパティ 要素の 100% を正確に 100% に設定するのは何ですか?これは、CSS でパーセンテージを扱うときに遭遇する主な問題です。レイアウトが複雑になるにつれて、パーセンテージを追跡することが非常に難しくなり、注意しないと、まったく奇妙な動作が発生します。
パーセンテージを使用することには明確な利点があります。パーセンテージ ベースのレイアウトは、さまざまな画面サイズに自動的に適応します。そのため、レスポンシブ デザインではパーセンテージの使用が不可欠です。一般的なグリッド システムと CSS フレームワークは、パーセンテージ値を使用してレスポンシブ グリッドを作成します。
明らかに、静的な値の方が適している状況もあれば、パーセンテージなどの適応的なものの方がはるかにうまく機能する状況もあります。デザインの要素でどのルートを取るかを決定する必要があります。
静的単位
ピクセルは静的です。 1 つのデバイスでの 10 ピクセルは、すべてのデバイスでの 10 ピクセルです。確かに、密度やデバイスが実際にピクセルを解釈する方法などがありますが、画面のサイズが異なるため、大きな変化は見られません.
CSS を使用すると、要素の定義を簡単に行うことができます。 ピクセル単位の高さ 、そしてそれは同じままです。それは予測可能です。
|_+_|
JavaScript などで変更しない限り、それは変わりません。
さて、そのコインには別の側面があります。変わりません。つまり、すべてを正確に測定する必要があり、それでも、サイトがすべてのデバイスで機能するとは限りません。そのため、静的ユニットは、子要素、メディア、および伸びたり大きくなったりすると歪んだり奇妙に見えたりするものに対してうまく機能する傾向があります。
要素の高さを 100% に設定する
要素の高さを 100% に設定すると、画面全体の高さに拡張されますか?時々。 CSS は常にパーセント値を親要素のパーセンテージとして扱います。
親要素なし
新しく作成した場合 これはサイトの body タグにのみ含まれているため、100% はおそらく画面の高さに相当します。これは、高さの値を定義しない限りです。 .
HTML:
|_+_|CSS:
|_+_|
それか 要素の高さは画面の高さと同じになります。デフォルトでは、 画面全体に広がるため、ブラウザーが要素の高さを計算する際に使用する基準になります。
静的な高さを持つ親要素を使用
要素が別の要素内にネストされている場合、 ブラウザ 親要素の高さを使用して 100% の値を計算します。したがって、要素が高さ 100px の別の要素内にあり、子要素の高さを 100% に設定するとします。子要素の高さは 100px です。
HTML:
|_+_|CSS:
|_+_|
子要素で使用できる高さは、親の高さによって制限されます。
パーセンテージの高さを持つ親要素を使用
直感に反するように思えるかもしれませんが、要素の高さをパーセンテージのパーセンテージに設定できます。要素に親要素があり、その高さがパーセンテージ値として定義されている場合、ブラウザーは、親に基づいて既に計算された親と同じ値を使用します。これは、値の 100% がまだその値であるためです。
|_+_|CSS:
|_+_|
この例では、親要素の高さは画面全体の 75% です。その場合、子も使用可能な全体の高さの 100% になります。
高さのない親要素を使用
興味深いことに、親要素の高さが定義されていない場合、ブラウザは、操作できる具体的な値が見つかるまでレベルを上げ続けます。それが 何も見つからない場合、ブラウザはデフォルトで画面の高さを設定し、要素に同等の高さを与えます。
HTML:
|_+_|CSS:
|_+_|
子要素は、画面の上部と下部まで拡張されます。
ビューポート ユニット
パーセンテージ単位での計算は難しい場合があり、各要素はその親に結び付けられているため、すべての要素を無視する単位のセットと、利用可能な画面スペースから直接離れた基本要素のサイズがあります。これらはビューポート単位であり、要素がどこにあるかに関係なく、画面の高さまたは幅に基づいて直接サイズを指定します。
要素の 身長 画面の高さに等しい場合、その高さの値を 100vh .
|_+_|
これを行うとレイアウトが崩れやすく、影響を受ける他の要素を認識する必要がありますが、ビューポートは、要素の高さを画面の 100% に設定する最も直接的な方法です。