CSS容器没有随着网格的增长而增长？

Question

我在CSS中定义了一个容器背景，如下所示；

.container {
    background:#fff;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    width:970px;
    border:1px solid #000;
    padding:5px 10px;
}

问题是我在容器的底部(靠近底部边缘)放置了一个jqGrid，当它最初绘制时，它确实适合容器面板，并且看起来是正确的。类似这样的东西(请原谅我的非133t图形技巧)：

alt text http://img67.yfrog.com/img67/7162/screenshot002f.jpg

但是当我用行填充网格时，它会超出容器的大小，看起来非常俗气，就像这样(我圈出了原始容器的背景边)：

alt text http://img80.yfrog.com/img80/5419/screenshot003fr.jpg

我确信这是我用CSS做错了什么。任何建议都将不胜感激。

编辑:问题不在于容器的宽度和高度是否与现在填充的网格的新高度重叠

Answer 1

我见过很多次这样的情况，当你在里面有浮动的时候。在关闭容器之前添加一个清理div。你应该总是在花车后清理干净。

<div class="container">
  <div id="nav" style="float:left;">
  ...
  </div>
  <div id="grid" style="float:left;">
  ...
  </div>
  <div style="clear:both;"></div> <!-- this does the trick -->
</div>

我不同意adding float to container的观点。虽然这会起作用，但是使用不必要的浮点数会给你带来更多的问题。只在必要的地方使用浮动，并在浮动完成时清除它。

根据我的经验，除非你定义了height，否则overflow在这里没有任何意义。我不认为在容器上设置溢出可以解决这里的问题。如果我错了，请在评论中纠正我。

Answer 2

.container { overflow:hidden; }

假设您正在处理浮点数，这是使容器实际包含它们的一种方法。

Answer 3

你的容器的宽度是固定的，不会增长。你可能要找的是最小宽度。换句话说，改变：

width:970px;

至：

min-width:970px;

请注意，IE 6和7将宽度视为最小宽度，但其他浏览器不这样做。