Question

我的html代码部分是这样的

<div id="container">
<div id="content">
    <div></div>
    <div></div>
    <div></div>
</div>
</div>

在CSS中我有

#content
{

    min-height:600px;
}

但是我期待这个id为id = content的div来扩展未发生的高度。如何解决这个问题？

您可以在此jsfiddle链接http://jsfiddle.net/eYMz3/

查看完整的代码

Answer 1

将您的代码更改为：

<div id="container">
<div id="content">
    <div></div>
    <div></div>
    <div></div>
</div>
</div>

应该这样做，因为它自己的“容器”无效

Answer 2

您需要在overflow:hidden

上设置#content

http://jsfiddle.net/eYMz3/3/

问题是你想要伸展的元素#content是未清除的浮动元素。这些不会延长他们的父母。

如果您使用overflow: visible以外的任何内容（默认行为），它将使用块格式化上下文，这将基本上清除浮动。

w3 Documentation

您也可以在<div style="clear:both;"></div> div结束前添加#content以清除浮动广告。

Answer 3

这里的问题是你正在使用float，但从不清除它们，这意味着父元素不知道要扩展到的高度。

解决此问题：

您可以使用http://nicolasgallagher.com/micro-clearfix-hack/

中的micro clearfix hack

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

然后将课程添加到<div id="content">，使其成为<div id="content" class="cf">

<强> JSFiddle Demo

你可以在这里阅读花车 - 在“大崩溃”一节下 - http://css-tricks.com/all-about-floats/

Answer 4

我认为这里的问题是#content中的所有元素都有float：left applied。结果是元素本身不会响应其中元素的高度。在这种情况下，min-height和height将执行相同的操作，并且#content的高度不会延伸。

除此之外，一切似乎都按照您提供的文档中所期望的那样工作。我可能会误解你的问题，但我无法添加评论要求澄清，因为它告诉我我没有足够的分数。

为什么最小高度不起作用？

4 个答案: