2

高さを自動に設定すると、#container の背景色が表示されません。ただし、1000px などの固定高さに設定すると表示されます。「overflow:auto」を試してみましたが、うまくいきませんでした。どうすれば修正できますか？#container をそのコンテンツに応じて垂直方向に拡張し、背景色も表示したい. どんなアイデアでも大歓迎です！

HTMLは次のとおりです。

<div id="container">
    <div id="main">
        <div id="div1">text text text text text text text text text text text texttexttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
        <div id="div2">text text text text text text text text text text text texttexttext</div>
        <div class="clear"></div>
    </div><!--end of main-->
</div><!--end of container-->

CSSは次のとおりです。

#container {
    background-color: rgb(255, 102, 204);
    height: auto;
    width: 1200px;
    position: absolute;
}
#container #main {
    background-color: rgb(204, 51, 0);
    height: auto;
    width: 900px;
    position: absolute;
    overflow: auto;
}
#container #main #div1 {
    background-color: rgb(0, 204, 255);
    float: left;
    width: 300px;
    padding: 5px;
    height: auto;
    margin: 20px;
}
#container #main #div2 {
    background-color: rgb(0, 153, 153);
    height: auto;
    width: 400px;
    float: left;
    margin: 10px;
}
.clear {
    clear: both;
}
4

3 に答える 3

3

あなたが持っている問題は、#main div持っていることposition:absolute;です。position:absolute;その要素が通常のフローと一緒に、または通常のフローから削除されることを考慮に入れる必要があるposition:fixed;ため、基本的には親の中にありません。

ここにあなたのコードが実行されています

詳細については、w3schoolsを確認してください。

それが役立つことを願っています

于 2013-09-23T20:38:58.733 に答える
2

すべての要素は、親の高さを計算しない絶対位置または浮動小数点のいずれかです。一部の要素または少なくともコンテナーに最小高さを設定してみてください。

ちょっと待ってください。ソリューションを使用して jsfiddle をセットアップしてみます :)

!!! lazychio の回答を参照してください。探しているものです。

于 2013-09-23T20:12:51.463 に答える