Question

我似乎无法弄清楚为什么我的信息容器div不会根据其内容调整其高度。我确实有一个浮动div，我认为它可能导致问题，但我不完全确定。我有一个链接到jsfiddle，你可以看到CSS和一些HTML，如果它有帮助。非常感谢任何帮助！

这是保存浮动的信息容器ID的CSS和所有其他信息

    #info-container{
    position:relative;
    padding-bottom:20px;
    padding-top:20px;
    padding-left:10px;
    padding-right:10px;
    margin-left:auto;
    margin-right:auto;
    background:#6F90A2;
    min-width:1000px;
    max-width:1000px;
    clear: both;
    height:auto;
}

http://jsfiddle.net/r35K4/

Answer 1

将overflow:auto;添加到#info-container。

<强> jsFiddle example

浮动子元素会将其从文档流中删除，父文件将折叠。通过添加溢出规则，可以恢复所需的行为。

Answer 2

#info-container{
    overflow: auto;
}

Answer 3

您需要所谓的CSS clearfix。这可以通过以下CSS实现。

#info-container:after {
    clear: both;
    content: "";
    display: table;
}

<强> Working Example

这将创建一个伪元素，它将强制包装器包装浮动的子节点。

这可以说是一个更简洁的解决方案，添加overflow属性，因为溢出属性有其他用途，根据具体情况可能会导致隐藏溢出或内部滚动条出现问题。

Answer 4

<强> jsBin demo

创建一个CSS类：

.clear:before,
.clear:after {
  content:" ";
  display:table;
}
.clear:after {
  clear:both;
}

并将其应用到您的

<div id="info-container" class="clear">

或包含 Floated 元素的任何其他元素，您遇到了问题。

<小时/> 如果您想更简单，请使用

overflow : auto;

对于包含浮动子项的任何父元素，如果您能够这样做，因为它将成为溢出元素

不根据内容调整高度

4 个答案: