css - 如何使 CSS div 将自动高度设置为内容

Question

我这个奇怪的 CSS 问题。我在下面的代码中有两个框：

#mainbox{
    width:100%;
    position:absolute;
    top:300px;
    left:0px;
    min-height: 700px;
    background-color:#0052b0;
    display: inline-block;
}

#contentbox{
    width:80%;
    position:absolute;
    left:10%;
    background-color:white;
    border-width:5px;
    border-style:solid;
    border-color:#0052b0;
    min-height:700px;
    top:-50px;
}

#contentbox 在#mainbox 内。问题是当内容高度超过内框限制时，内框会增加它的高度，以包裹内容。但这不会发生在#mainbox 上，它是外框。

谁能帮我解决这个问题？

Answer 1

删除position:absolute; 并替换为position:relative;

#contentbox{
width:80%;
left:10%;
position:relative;
background-color:white;
border-width:5px;
border-style:solid;
border-color:#0052b0;
min-height:700px;
top:-50px;
}