フローティングされた子の Div の高さを親の高さと一致させるにはどうすればよいですか?

親の高さに合わせて浮動子 Div の高さのバランスをとる

問題ステートメント:

次の HTML を含むページ構造:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

子左側の div の内容が拡大すると、親 div の高さも当然増加します。ただし、子の右側の div の高さは変更されないため、次のような疑問が生じます: 子の右側の高さをその親の高さと等しくするにはどうすればよいですか?

解決策:

子の右 div の高さを親の高さと一致させるには、次の CSS プロパティを親に適用します。 element:

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

これらのプロパティは、親要素が定義された高さを持ち、フローティングされた子を含むことを保証します。次に、次の CSS プロパティを .child-right クラスに追加します。

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

これらのプロパティは、子の右 div に絶対位置を与え、高さを 100% に設定し、その右端に配置します。

等しい高さの列の作成に関する詳細な例と情報については、リファレンス セクションにあるリンクを参照してください。

参考資料:

• [等高さ列の CSS 例](外部リソースへのリンク)
• [等高さに関する情報]コラム](外部リソースへのリンク)

以上がフローティングされた子の Div の高さを親の高さと一致させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。