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已经使用了浮动清算方法。留下我的答案虽然它可以帮助有类似问题但没有清除css的人。]

这是因为你正在浮动section#main。浮动区域需要一个清除div（或浮动清除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

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

1 个答案: