css - 自动调整动态内容的 div 大小

Question

我希望有人能帮助我解决 CSS 问题。我正在使用 JavaScript 将额外的行添加到工作正常的表中，但是当我添加新行时我的页面不会展开，这意味着内容在从页面上消失时变得不可见。

这是我的网页的简化版本:

<div class="wrapper" >
  <section id="main" class="column">
     Expanding table code here.
  </section>
</div>

我还有以下 CSS:

.wrapper {
width:1200px; 
overflow:hidden; 
margin:0 auto; 
border:1px solid #999;
border-bottom:2px solid #999;
}

section#main {
width: 77%;
min-height: 500px;
float: left;
margin-top: -2px;
}

我尝试添加 overflow:hidden;到主要部分的 CSS，因为我认为这可能有效，但事实并非如此。如果我删除主要部分，那么它工作正常，但我需要这个，因为我的包装 div 中还有其他内容。

任何帮助将不胜感激，因为这让我发疯!!!

提前致谢:)

Answer 1

[编辑:有人在评论中向我指出，OP 已经在使用 float 清除方法。在这里留下我的答案，以防它帮助有类似问题但没有清除 css 的人。]

那是因为你飘了section#main . float 区域在它们之后需要一个清除 div(或 float 清除 css)，因为它们本身实际上并不占用垂直空间。你可以这样做:

<div class="wrapper" >
  <section id="main" class="column">
     Expanding table code here.
  </section>
  <div style="clear: both;"></div>
</div>

<div style="clear: both;"></div>是执行此操作的传统方法，但您可能需要考虑此处描述的新方法:http://www.quirksmode.org/css/clearing.html