css - 高さ：自動のときに親divが表示されない

Question

contenttop と contentbottom という 2 つの親 div があります。width:100% と height:auto の両方に設定しました (含まれる div に基づいて流動的にしたい) これら 2 つの div のそれぞれに、さらに 2 つの div があります。

#col1, #col2, #col3, #col4
{
    position:relative;
    width:45.5%;
    margin: 0 0 10px 3%;
    padding:0;
    display:inline;
    float:left;
    background-color:yellow;
}

どちらも流動的に設定されています。つまり、それらのテキストのサイズに設定されています。

私が抱えている問題は、特定の高さを設定しない限り、contenttop と contentbottom の div が表示されないことです。#col div は正しく動作していますが、コンテンツ div の背景色が表示されません。

ここで何が起こっているのですか？そして、解決策はありますか？

完全なCSSは次のとおりです。

body
{
    background-color:aquamarine;
}

p, p.maintextcontent, h1, h2, h3, h4, h5, h6
{
    margin:0;
    padding:0;
}

#contenttop
{
    position:relative;
    width:100%;
    height:auto;
    background-color:brown;
    margin:0;
    padding:0;
}

#col1, #col2
{
    position:relative;
    width:45.5%;
    margin: 0 0 10px 3%;
    padding:0;
    display:inline;
    float:left;
    background-color:yellow;
}

#contentbottom
{
    clear:both;
    position:relative;
    width:100%;
    height:auto;
    background-color:#000000;
    margin:0;
    padding:0;
}

#col3, #col4
{
    position:relative;
    width:45.5%;
    margin: 0 0 10px 3%;
    padding:0;
    display:inline;
    float:left;
    background-color:yellow;
}

ありがとう

Answer 1