根据子 div 调整父 div 的大小答案

【问题标题】：Resizing parent div according to its child div根据子 div 调整父 div 的大小
【发布时间】：2012-09-11 05:18:40
【问题描述】：

我很不擅长 CSS。我想根据子 div 的高度调整父 div 的大小。下面是我的html代码。

<div id="mainPanel" class="tabPanel">
     <div class="ui-corner-all ui-widget-content grid_container" style="padding: 5px; margin: 5px; text-align: left;">
         <div align="left">
            <div id="subTabs" style="width:500px">
               <div class="ui-layout-content">
                  <div id="Form1">
                   </div>

                   <div id="Form2">
                   </div>
               </div>
            </div>
         </div>
      </div>
  </div>

在 form1 和 form2 div 中，我正在动态填充组件，这些组件可能会增长到任何高度。我尝试在所有父 div 中使用 overflow:auto ，但没有运气。任何帮助将不胜感激。

【问题讨论】：

非常欢迎使用一些 css...此外，如果没有声明其他任何内容，父级总是会调整到子级空间的大小
@Breezer 提出了我要问的一点。您将 Form1 和 Form2 的大小声明为什么？
在 Firefox 中使用 firebug 找出您的问题。
我将尺寸声明为 style="height: 740px; width: 100%; for Form1 and Form2。
如果你想稍后调整它的大小，你不能定义高度，或者你必须在加载新内容时更改它

标签： javascript html css css-float

【解决方案1】：

如果没有声明任何其他内容，则父级总是将大小调整为子级空间的大小。如果您设置了固定高度，不同的浏览器会表现不同，有些会展开有些会隐藏，有些会滚动。您可以通过以下任一方式简单地解决此问题将height 更改为min-height 或一起删除height 声明。

【讨论】：

【解决方案2】：

我认为您不必做任何特别的事情就可以让父 DIV 与子 DIV 一样高。可能是脚本有问题……

如果某些子级浮动，请尝试 overflow:hidden; 与父级 DIV 或其他“清除修复”CSS 技巧...

【讨论】：