如果在两个浮动的div（#content和#sidebar）中添加内容，如何使主div标签的高度增加？

7 浏览
0 Comments

如果在两个浮动的div（#content和#sidebar）中添加内容，如何使主div标签的高度增加？

请看这里以了解我遇到的问题：

http://jsfiddle.net/M8aV5/

#main {
width: 940px;
padding: 20px;
background-color: #ffffff;
}

（最好查看jsfiddle，因为我不确定哪段代码会影响到这个问题）

如你所见，当侧边栏添加更多内容时，#main div标签不会向下拉伸，这样会让一切看起来很糟糕。

很长一段时间以来，我只是在#main div标签上设置了一个标准高度，但现在我希望内容能够自由拉伸，而不会显得丑陋。

我真的很感激能够得到一些帮助，因为我完全不知道在哪里寻找答案。

0

1 答案

0 Comments

问题出现的原因是当在浮动的 div 标签 (#content 和 #sidebar) 中添加内容时，主 div 标签的高度不会自动增加。

解决方法之一是使用 clearfix 方法来清除浮动。可以在以下代码中看到如何使用 clearfix：

.cf:before,

.cf:after {

content: " ";

display: table;

}

.cf:after {

clear: both;

}

只需将 .cf 类添加到容器 div 标签 #main 中即可。关于此方法的详细信息可以在这里找到：http://nicolasgallagher.com/micro-clearfix-hack/

另一种解决方法是将 overflow:auto 属性添加到 #main 标签中。可以在这个链接中看到一个可行的示例：http://jsfiddle.net/M8aV5/2/

这也是一种相当流行的选项。关于这两种选项之间的讨论可以在这里找到：https://stackoverflow.com/questions/2373544

0