HTML Container 未扩展到内部内容高度绝对定位答案

【问题标题】：HTML Container not expanding to inner-content height absolute positioningHTML Container 未扩展到内部内容高度绝对定位
【发布时间】：2011-09-21 13:22:08
【问题描述】：

所以，

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

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

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

#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%;


}

【问题讨论】：

给你的页面换行一个位置：relative;当您使用位置元素时（我不推荐这种类型的头痛），那么它们就像没有明确选项的浮动，因此您必须将它们包含在位置元素中。
即使在页面换行上具有相对定位，子内容也不会强制页面换行展开。
'main-content-inner' 是浮动的还是奇怪的？请同时为两个内部分区提供 CSS。
添加了 CSS。它不是浮动的，只是绝对的。
我对这应该是什么样子有点困惑。你能张贴一张大致应该如何布局的图片吗？

标签： html css

【解决方案1】：

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

【讨论】：

即使只将最小高度设置为 100%，容器也拒绝扩展！
你可能想发布更多代码。也许在 jsFiddle 上举个例子。如果没有更多可以解决的问题，我真的看不出问题出在哪里。
嗯，代码太多了，发个精简版吧....但是为什么如果我手动设置页面换行的高度，它可以正常工作，但它不会扩展自动到其子容器的高度？
嗯，我的猜测是某些东西干扰了子元素的高度。如果您有浮动或类似的东西，CBRRacer 可能是正确的，在这种情况下，您必须在之后必须clear: both 才能正确设置高度。当您在#page-wrap 上设置高度时，容器的高度不再取决于子元素。但是如果没有看到更多，我真的无法确定。