为什么min-height不起作用？我的HTML代码

喜一部分是这样的为什么min-height不起作用？我的HTML代码

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

在CSS我有

#content 
{ 

    min-height:600px; 
}

但我希望这个id为内容div来延长高度没有发生。如何解决这个问题？

一个完整的代码，你可以在此的jsfiddle链接http://jsfiddle.net/eYMz3/

来源

2014-02-24 Krish Gowda

'container' < - 无效的标签和您共享的代码适用于我http://jsfiddle.net/eYMz3/1/ –

哇，这是很多代码在你的小提琴！来自你的问题的代码[按指定的方式工作]（http://jsfiddle.net/8Z54J/）。请尝试缩小问题范围，并在问题*中包含一个[最小重复]（http://sscce.org）*。 – Jeroen

你想把“照片故事”'div'放在灰色背景里吗？ –

您需要设置overflow:hidden在#content

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

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

如果使用非overflow: visible（默认行为）等任何东西，它会使用，这将基本清除浮动块格式化的内容。

w3 Documentation

你也可以添加<div style="clear:both;"></div>只是你#content div的年底前清除浮动。

来源

2014-02-24 14:15:24 smerny

谢谢。解决了这个问题。我不明白如何。 –

@KrishGowda，更新了一些解释。 – smerny

感谢您的解释。这是更好的做法？溢出：隐藏或清除：都?? –

检查

你的代码更改为：

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

应该这样做，因为在它自己的“集装箱”是无效的

来源

2014-02-24 14:08:05 SaturnsEye

除非用Javascript明确定义，否则自定义标签名称不会呈现。 – Kroltan

谢谢。我更新了代码。但结果仍然相同。 –

这里的问题是，你正在使用float S，但从来没有清除它们，这意味着父元素不知道的高度延伸到。

要解决这个问题：

您可以使用微clearfix黑客从http://nicolasgallagher.com/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

你可以在这里看到漂浮物 - 你nder部分“伟大的崩溃” - http://css-tricks.com/all-about-floats/

来源

2014-02-24 14:15:30

我认为这里的问题是#content里面的所有元素也float：left应用。这样做的结果是元素本身不会响应元素内部的高度。在这种情况下，min-height和height会做同样的事情，并且#content的高度不会延长。

除此之外，一切都似乎是工作正如人们所期望您提供的文件内。我可能误解了你的问题，但我无法添加要求澄清的评论，因为它告诉我我没有足够的分数。

来源

2014-02-24 14:15:58 tommypyatt

为什么min-height不起作用？我的HTML代码

回答

相关问题