要素の高さを下から上へ、上から下へ制御する CSS メソッド

よくある質問から議論を始めましょう。CSS を使用して要素の高さを [ブラウザコンテンツウィンドウの高さ] に設定する方法。

解決策1: 要素を画面の高さいっぱいにする

CSS では、vh は長さを表す特別な単位です。100vh の値は [ブラウザコンテンツウィンドウの高さ] です。

したがって、 height:100vh;は、ターゲット要素の高さを [ブラウザコンテンツウィンドウの高さ] にします。

解決策 2: カスケードの高さ:100% を使用します。

方法 1 では、[ブラウザコンテンツウィンドウの高さ] を持つ要素を 1 つだけ設定できます。しかし、一連の要素をまとめて高さ全体を占めるようにしたい場合はどうすればよいでしょうか?

この要件は、Web アプリケーションのシナリオでは非常に一般的です。 Web アプリケーションをネイティブアプリケーションのように見えるようにするには、アプリケーションの全体的な構造が常に画面全体を占め、それ以上でもそれ以下でもなく、スクロールバーも表示されないことが望まれます。スクロールする必要があるコンテンツが大量にある場合、アプリケーション内の div にスクロールバーが表示されますが、アプリケーションの本体はスクロールしません。

これは、全体の高さがコンテンツの高さに完全に依存する、高さが折りたたまれた例であり、見苦しいです。

これは高さが大きすぎる例です。アプリケーション全体にスクロールバーが表示され、上部のバーはスクロールして消すことができます。

ページ全体をスクロールできる場合、下にスクロールすると、上部のバーの内容も上にスクロールして消えます。これは通常の Web ページではよく行われますが、Web アプリケーションでは発生しません。

これは極めて普通の例です。適切に実装された Web アプリケーションでは、アプリケーション全体をスクロールすることはできませんが、中央のコンテンツウィンドウはスクロールできます。

解決策: 上から下まで高さを制御する

高さの崩壊と高さの過剰の理由は実際には同じです。親要素の高さは子要素の高さの影響を受けます。つまり、親要素は子要素によって「拡張」されます。高度な制御はボトムアップです。

親要素の高さが子要素によって引き伸ばされる理由は、 height のデフォルト値がautoであり、 auto の計算方法が子要素に基づいているためです。

したがって、これら 2 つの問題を解決するには、高度制御の方向を逆にして、高度を上から下に制御する必要があります。具体的には、要素の高さを明示的に定義するか、「祖父要素」の高さを基準とした相対的な高さ（パーセンテージ）を設定します。

明示的な高さを定義する: 要素の高さが子要素の影響を受けないように、要素の高さに明示的な値を指定します。たとえば、 height:480px;またはheight:100vh 。
「祖父要素」の高さを基準とした相対的な高さを設定します。要素の高さは親要素の高さによって決まるため、子要素の影響を受けません。これを行うには、高さのパーセンテージを使用します: height:100%;またはheight:90%; 。

上記 2 つのポイントを柔軟に活用することで、開発者はアプリケーション全体の各要素の高さを制御できます。

上記の Web アプリケーションの例では、解決策は次のとおりです。

まず、<html> 要素の高さを 100% に設定します。これにより、html 要素の高さがビューポート (コンテンツウィンドウ) の高さと正確に等しくなります。次に、body の高さを 100% に設定します。これにより、body 要素の高さが html 要素の高さ (ビューポートの高さと等しい) と正確に等しくなります。
画面を埋め尽くす要素に到達するまで、上から下までこのように続け、その要素の高さがビューポートの高さと同じになるように、その要素の高さを 100% に設定します。

これはトップダウンの特殊なケースです。実際、上から下までの高さを設定する場合、レイアウトのニーズに応じて、固定値 (100 ピクセル) またはその他のパーセンテージの高さ (80%) を設定できます。

この方法は、ターゲット要素にheight:100vh;を直接設定するよりもはるかに面倒です。しかし、この方法には利点があります。このプロセスでは、すべての祖先要素の高さを制御できます。子要素の高さを意図的に親要素よりも大きく設定しない限り、各親要素は子要素を収容することができ、ほとんどの場合、これが望ましい状態になります。「子要素の高さは100pxなのに、親要素の高さが拡張されない」といった問題は発生しません。

対象要素のheight:100vh;に設定し、親要素の高さが上から下に決定される場合（子要素の影響を受けない場合）、親要素は元の高さを維持し、拡張されず、オーバーフローが発生します。このとき、「子要素の高さはxxxであるが、親要素の高さが拡張されない」という問題が発生します。

トップダウンの実用的なヒント：子要素が親要素の残りの領域を埋めるようにする

トップダウンアプローチには非常に実用的なトリックがあります:

<html>
  <本文>
    <ヘッダー></ヘッダー>
    <div class="content"></div>
  </本文>
</html>

<html> と <body> の高さがすでに決まっていて (100% ビューポート)、ヘッダーの高さも決まっている (64px) 場合、ヘッダーの下のdiv.content親要素の残りの領域を埋めるようにするにはどうすればよいでしょうか。答えも非常に簡単で、 div.content { height: 100%; }を設定するだけです。 100% は親要素の残りの使用可能な高さを基準に計算されるため、この CSS により div.content が親要素の残りの領域を埋めるようになります。
この図の効果は次のように実現されます。

トップダウン対ボトムアップ

これは必ずしもトップダウンがボトムアップよりも優れているということを意味するものではありません。

トップダウンアプローチの利点は、祖先要素の高さが定義されている限り、子孫要素の高さもそれに応じて決定されることです。

ボトムアップの利点は、親要素の高さが必要に応じて自動的に拡張され、すべての子要素をラップできることです。

Web アプリケーションでは、これら 2 つの方法を混在させる必要があることがよくあります。

コンテンツのオーバーフローに注意

親要素のコンテンツボックスが子要素を収容できない場合にオーバーフローが発生することに注意してください。

トップダウンとボトムアップのアプローチを混在させると、次のような問題が発生する可能性があります。

A 要素は B 要素の親要素です。要素 A の高さは上から下に決定され (例: height:80% )、要素 B の高さは下から上に決定されます ( height:auto )。 B の子要素が B の高さを拡張し、A のコンテンツボックスの高さを超えると、オーバーフローが発生します。

この時点で、次の 2 つのオプションを検討してください。

B の高さを制限します。つまり、B 要素の高さに親要素の高さを超えない値を指定します。たとえば、 height:100pxまたはheight:100% 。
B の内容を A 要素に表示したい場合は、A にoverflow:autoを設定します。この方法により、限られたスペース内でスクロールバーを使用してより大きなコンテンツを表示できるようになります。

チャットウィンドウはoverflow:autoの例です

参考文献

https://stackoverflow.com/questions/7357818/how-can-an-html-element-fill-out-100-of-the-remaining-screen-height-using-css
https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window
https://stackoverflow.com/questions/31893330/html-and-body-elements-height/31895805#31895805
https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#ルート高さ

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: XHTMLコードの一般的なアプリケーション問題をまとめる

>>: Vueは州、都市、地区のカスケード選択を実現します