最小高度不适用于父级Div

min-height对于父级Div不起作用，因为我将float:left属性设置为它的子div。最小高度不适用于父级Div

你能帮助我吗？

<style type="text/css"> 
*{ margin: 0 auto; padding: 0; } 

#wrapperd{ 
width : 500px; 
border : 1px solid red; 
min-height:200px; 
} 

#test { 
border:2px solid blue; 
width:600px; 
float:left; 
height:500px; 

    } 
</style>

HTML代码

<div id = "wrapperd"> <!-- Parent Div --> 
<div id = "test"> </div> <!-- Child Div --> 
</div>

演示链接： - http://jsfiddle.net/rushijogle/cFX68/2/

thanx提前:)

来源

2013-03-19 Rushikesh jogle

您只需[清除您的浮动]（http://www.quirksmode.org/css /clearing.html）！ – CherryFlavourPez 2013-03-19 17:14:52

一个古老的技巧是将“overflow：hidden;”添加到div。不确定这些缺点。 http://jsfiddle.net/cFX68/5/ – 2013-03-19 17:16:18

赞@CherryFlavourPez说 - '#wrapperd :: after { content：“”; display：block; 明确：均; }' – couzzi 2013-03-19 17:17:02

有两件事情可以做。一个是浮动元件后添加一个清除元件（具有clear: left或clear: both。

http://jsfiddle.net/ExplosionPIlls/cFX68/3/

另一种是添加overflow: hidden到父DIV，其具有“拉”的div高度的效果下来，它围绕着较高的浮动DIV。

http://jsfiddle.net/ExplosionPIlls/cFX68/4/

注意，这对孩子的div任何的宽度没有影响。

来源

2013-03-19 17:17:16

这些都不是理想的。第一个选项引入了一个不必要的和非语义的额外元素，第二个选项不适合，因为OP将子宽度设置为大于父元素，所以我们可以假设他*希望*额外的宽度可见。因此，[这个小提琴]（http://jsfiddle.net/cherryflavourpez/3jPSK/）显示最简单的解决方案。 CSS：'#wrapperd：after { content：“”; display：table; 明确：均; }' – CherryFlavourPez 2013-03-19 17:25:13

'overflow-y：hidden'可以在大多数浏览器（而不是 gaynorvader 2013-03-19 17:42:32

经典清除问题：
1）设置父级溢出：隐藏;如上所述。唯一的问题是如果任何内容会溢出父母盒子。
2）我喜欢使用的另一个明确的修复技巧是：http://nicolasgallagher.com/micro-clearfix-hack/，我认为它类似于Cherry的评论...

来源

2013-03-19 19:01:02

最小高度不适用于父级Div

回答

相关问题