私の子 DIV が浮動親から 100% の高さを継承しないのはなぜですか?

浮動親内の子 DIV の高さ 100% を強制する

提供された HTML と CSS では、努力にもかかわらず、内部 DIV の高さは 0px のままです。親の100％であると宣言するheight.

解決策:

この問題を解決するには、親 DIV「outer」にフレックスボックス機能を有効にする「display: flex」プロパティが必要です:

#outer {
  display: flex;
}

Flexbox は柔軟なレイアウトのサポートを導入し、内部 DIV (「inner」) を垂直方向に拡張して占有できるようにします。親の完全な高さ。

追加の考慮事項:

1. ブラウザの互換性: Flexbox は最新のブラウザで広くサポートされていますが、問題が発生する可能性があります。 Internet Explorer の古いバージョン (IE9 など) との互換性の問題。プレフィックスを使用して、さまざまなブラウザ間での互換性を確保します。
2. 項目の整列と自己整列: 「align-items」は、子の垂直方向の整列を決定する親のプロパティです。デフォルト値は「stretch」で、利用可能な高さを埋めるためにすべての子を垂直に引き伸ばします。子 DIV に別の位置合わせが必要な場合は、「align-self」プロパティを使用します。
3. JS Fiddle Example: https://jsfiddle.net/bv71tms5/2/ にアクセスしてください。提案されたソリューションの実例をご覧ください。

以上が私の子 DIV が浮動親から 100% の高さを継承しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。