HTML 容器未扩展到内部内容高度绝对定位

Question

所以，

<div id="page-wrap">
  <div id="main-content>
    <div id="main-content-inner">
    </div>
  </div>
</div>

main-content 是相对定位，page-wrap 是默认定位，main-content-inner 是绝对定位。

问题是 page-wrap 高度没有扩展到 main-content-inner 的高度。 main-content-inner 显示得很好，但它显示在 page-wrap 的边界之外。因此，如果我将溢出设置为隐藏在页面包装上，我的主要内容内部就会被切断。如何使我的分页高度扩展到其子容器的最高高度？

#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
overflow:hidden;

}

#main-content {
width: 100%;

margin-left: -295px;
position:relative;

}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;


}

Answer 1

如果您正在使用 min-height 属性，那么为什么要在它之后使用 height 属性。当您设置 height: 100% 时，我相信您将 #page-wrap 高度限制为正好 100%。尝试删除 height 定义，看看是否能解决问题。