☰

フロートされた子 div の高さを親の高さまで拡張するにはどうすればいいですか? 質問する

tag-icon • tag-icon html css layout
フロートされた子 div の高さを親の高さまで拡張するにはどうすればいいですか? 質問する

ページ構造は次のようになります。

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

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

これで、child-leftDIV のコンテンツが増えるため、parent子 DIV に応じて DIV の高さが増加します。

しかし、問題はchild-right高さが増加しないことです。高さを親と同じにするにはどうすればよいでしょうか?

ベストアンサー1

要素に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の例でより詳細な結果を見つけるここ等高柱に関する詳細情報ここ。

おすすめ記事