浮動子 Div の高さが 0px になることがあるのはなぜですか?それを修正するにはどうすればよいですか?

浮動子 Div の高さ 100% を達成する

親 div 内で浮動子 Div を利用する場合、子がdiv は高さ 0px を想定します。この一見不可解な動作は、浮動要素がその親と対話する方法に由来しています。

この特定のケースでは、内側の div は左に浮動するように設定され、100% の高さが割り当てられています。ただし、この構成では望ましい結果は得られません。

この問題を解決する鍵は、親 div の CSS プロパティを変更することにあります。表示プロパティを flex に設定すると、親 div を強制的に flex コンテナのように動作させ、その子要素を高さいっぱいまで伸ばすことができます。

親 div の変更された CSS コードは次のとおりです:

#outer {
  display: flex;
}

IE9 などの古いブラウザでは、flex プロパティが完全にはサポートされていない可能性があることに注意することが重要です。したがって、さまざまなブラウザ間での互換性を確保するために、ベンダー プレフィックスを追加することをお勧めします。さらに、子 div が親 div の高さ全体を確実に埋めるために、ストレッチの値を指定して align-items プロパティを使用することを検討してください。

これらの CSS 変更を適用することで、内部 div に強制的に次の値を適用することができます。親 div の高さの 100% となり、目的の垂直方向の配置が実現されます。

以上が浮動子 Div の高さが 0px になることがあるのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。