浮動子 Div を親の高さに合わせて拡張するにはどうすればよいですか?

子 Div の高さを親の高さに拡張する

親要素と子要素が並んで配置されている Web レイアウトでは、多くの場合、これが必要になります。高さが同じになるようにします。これは、子要素内のコンテンツによって親要素が引き伸ばされたり圧縮されたりするのを防ぐためです。

問題:

フローティングされた 2 つの子 div を持つ親 div があります。 (子左と子右)。 child-left の内容が増加すると、それに応じて親 div の高さが調整されます。ただし、子の右の高さは変更されません。

解決策:

子の右の高さを親と同じにするには、次の CSS を適用します。 style:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-left {
    float: left;
}

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

• .parent:

  • overflow: hidden: 親 div のコンテンツが境界を超えてオーバーフローするのを防ぎます。
  • position:relative: 親 div をその子の相対配置コンテキストとして設定しますdivs.

• .child-left:

  • float: left: child-left をparent.

• .child-right:

  • background: green: デモ用のオプションの色。
  • height: 100%: 子の右の高さをその高さと一致するように設定します。 parent.
  • width: 50%: 子の右の幅を親の 50% として指定します。
  • position:Absolute: 子の右を親内に絶対的に配置します。
  • right: 0: 子の右を親の右に揃えます。
  • top: 0: 子の右を親の右に揃えます。

これらのスタイルを組み合わせることにより、子-左のコンテンツに関係なく、親と一致するように子-右の希望の高さを拡張できます。

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