1. ホーム
  2. html

[解決済み] フロートされた子 div の高さを親の高さに拡張するにはどうすればよいですか?

2022-02-09 13:47:11

質問

ページ構成は以下の通りです。

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

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

では、その child-left DIVはより多くのコンテンツを持つことになるので parent DIVの高さは、子DIVの高さに応じて増加します。

しかし、問題は child-right の高さが増えません。どうすれば親と同じ高さにできますか?

どうすればいいですか?

については parent 要素に、以下のプロパティを追加します。

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

であれば .child-right これらを

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

CSSの例でより詳細な結果を探す こちら また、等高線カラムの詳細については こちら .