父div的高度不增长

Question

我无法让父级 div 随着子级的成长而延长其高度（弗洛伊德？:-))

示例页面

这里的父级是“main_bottom”，其中包含“main_mid”及其子级。

该结构有点不寻常，因为文本必须位于圆角内，圆角很大，因此我无法使用通常的“固定顶部 - 然后动态中间 - 然后固定底部”例程。

当然，可怕的粉色和红色只是为了让孩子们的 div 尺寸很容易看到。

任何帮助将不胜感激，祝你

有美好的一天

Answer 1

我几次遇到这些问题。我的解决方案是添加 display:block;在子div和高度中：自动；在父分区中。

div.parent {
    ...
    height: auto;
    ...
}
div.child {
    ...
    display: block;
    ...
}

Answer 2

文本的父容器之一具有固定高度，并且文本浮动但不清除。从 #main_bottom 中删除 height: 135px（或许替换为 min-height）规则，并添加 overflow: auto > 规则到 #main_mid 来清除浮动，布局将按预期工作。

Answer 3

使用 overflow: auto 和 height: auto添加这些定义，

#main_bottom {
  min-height: 600px;
  overflow: auto;
}


#main_mid {
  overflow: auto;
  height: auto;
}

容器将适合内部内容。