CSS容器不与网格一起增长？

我有这样的CSS定义的容器背景;CSS容器不与网格一起增长？

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

的问题是我有一个jqGrid的放入容器的底部（接近底部边缘），并在其最初绘制它不适合容器面板内，看起来是正确的。事情是这样的（请原谅我的非的l33t图形的skillz）：

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

但是当我填充网格行它跨出的容器，它看起来真的很俗气，这样的事情（我盘旋原容器背景的边缘）：

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

我相信它的东西我做错了与CSS。任何意见，将不胜感激。

编辑：问题不在于宽度容器的高度由现居住电网的新高度重合

来源

2009-10-17 CmdrTallen

我已经多次看到这种情况，当你有漂浮在里面。在关闭容器之前添加清除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。虽然这会起作用，但有不必要的花车会给你带来更多的问题。只有在必要时使用浮动，并在完成浮动时将其清除。

同样以我的经验，overflow在这里没有任何意义，除非你定义了height。我不认为在容器上设置溢出修复了这个问题。如果我错了，请在评论中纠正我。

来源

2009-10-17 06:59:39

添加溢出：隐藏自动包含浮动。（它比clearfix要容易得多。）如果你声明了一个高度，它会将其关闭 - 如果没有，就包含它们。当然，没有别的东西可以逃脱容器。不过，建议您不要使用浮动内容。 – 2010-03-14 00:06:12

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

width:970px;

到：

min-width:970px;

作为一个说明，IE 6和7的治疗宽度最小宽度，但其它的浏览器没有。

来源

2009-10-17 02:18:04

好的，谢谢高度的任何东西？ – CmdrTallen 2009-10-17 02:27:33

我想你的意思是相反的。 IE6不理解最小宽度。它像宽度一样对待它。 – 2009-10-17 06:59:07

我认为你需要这在你的CSS：

overflow: auto;

来源

2009-10-17 04:27:50

http://www.w3schools.com/Css/pr_pos_overflow.asp有其他选项和信息与此相关。 – 2009-10-17 04:29:02

它对我来说很奇怪，它如何扩展容器，但显示了滚动条和垂直滚动条。似乎应该有一种方法来调整背景容器的大小，而不是放置滚动条。有 – CmdrTallen 2009-10-17 06:39:10

有。溢出：隐藏。 – 2010-03-14 00:07:58

.container { overflow:hidden; }

假设你正在处理的浮动，这是使实际包含它们的容器的一种方式。

来源

2009-10-17 04:31:30

根据您对容器和内部网格的浮动情况，您可以执行许多不同的操作。您可能只需添加清除即可离开，您也可以浮动父项。这被称为，设置一个浮点数来修复一个浮点数。所以，如果您的网格有

float:left;

然后，你可以添加

float:left;

要将容器的CSS。我真的很喜欢Complex Spiral article on containing floats。

来源

2009-10-17 04:38:52

CSS容器不与网格一起增长？

回答

相关问题