Floating Div を親の高さの 100% にするにはどうすればよいですか?

親内の浮動 div の高さ 100% を達成する

浮動 div を親の 100% の高さに設定しようとすると、次のようになります。内部 div が高さ 0px でレンダリングされるという問題が発生します。この動作は、HTML 要素のデフォルトの垂直方向の配置に起因します。この問題に対処するには、親 div の表示プロパティを構成して垂直方向の配置を有効にする必要があります。

解決策:

内部 div を強制的に親の高さと一致させるには、CSS を次のように変更します:

#outer {
  display: flex;
  /* Add necessary prefixes for cross-browser compatibility. */
}

追加考慮事項:

• プレフィックス: ブラウザ間の互換性を確保するには、適切な CSS ベンダー プレフィックスを追加することが重要です。
• Internet Explorer: Flexbox のサポートが制限されているため、Internet Explorer 9 以前ではレイアウトが表示されない場合があります。
• Alignment: デフォルトでは、親の align-items プロパティは「stretch」に設定されています。これは、内部 div を含む子要素が垂直方向に整列し、引き伸ばされることを意味します。利用可能なスペースを埋めるために。子 div に別の配置が必要な場合は、align-self プロパティを使用できます。

ライブの例:

ライブを表示するには、次のリンクをクリックしてください。 JSFiddle のデモ: https://jsfiddle.net/bv71tms5/2/

以上がFloating Div を親の高さの 100% にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。