css - 当子 div 的高度增加时增加外部 div 的高度

Question

我正在开发一个 asp.net 网络应用程序。

有一个母版页的子窗体。母版页没有定义任何高度，但它为 子窗体 定义了一个 X px 高度。

在子表单上它有一个 fieldset 容器，在这 2 个 table 容器 和一个 container 用于 gridview control.

据我所知，我已将 #mainOuter_box 的高度设置为 auto 并将子表单容器 (#child_contentbox1) 的高度设置为 auto 也是。

但是这个策略并没有像预期的那样起作用。然而，我也尝试过这个代码示例(我从这个 stackoverflow 问题线程 how to size a div's height to its container height, using CSS? 中获得，但我怀疑我是否正确编写了它。

$(文档).ready(函数(){
$("#mainOuter_box").css('高度',$("#child_contentbox1").innerHeight()+$("#child_contentbox2").innerHeight()+$("#child_contentbox3").innerHeight()) ;
});

请建议我如何增加 #mainOuter_box 的高度，当数据/记录增加 gridview 容器框的高度时。

谢谢! 更新 这里是 jsfiddle 链接，我在其中附加了主表单的 CSS 和 HTML。非常感谢您的指导!! http://jsfiddle.net/nikhilbs09_1/325oes4m/

Answer 1

“当子div的高度增加时，增加外部div的高度”

如果你想让外部div根据它的内容调整大小，你不需要为它设置任何高度，另一方面，如果您的 div 中有 float 元素，则需要对外部 div 使用 clear: both 或 .clearfix 类。

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0px;
    visibility: hidden;
}