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;
}