如何使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;
}