根据容器调整“div”的高度

根据容器调整“div”的高度

问题描述:

如何才能使容器中的“div-3”根据其高度进行调整。根据容器调整“div”的高度

无论这个div-3不完整的内容是什么,我都需要适合div 1和2所剩的高“div-3”。

可能是div 1或div 2不显示(display:none)。

HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<style> 
.container{ 
    height:300px; 
    overflow:hidden; 
    width:500px; 
} 
.container div{ 
} 
.div-1{ 
    background-color:#009966; 
} 
.div-2{ 
    background-color:#999999; 
} 
.div-3{ 
    background-color:#3399FF; 
} 

</style> 
</head> 
<body> 
<div class="container"> 
    <div class="div-1">g f erg erg erg rga f erg erg erg rga</div> 
    <div class="div-2"> 
     sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sf erg erg erg rgadf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br /> 
    </div> 
    <div class="div-3">b gf erg erg erg rga</div> 
</div> 
</body> 
</html> 
+0

您能否重新说明您的问题?你最后一句话是什么意思? – 2009-10-29 10:38:52

我不太清楚你的要求。但是,如果在CSS中,而不是使用高度,请使用min-height,如果div内容小于指定高度,它仍会强制使用300px,如果它更大,则会自动调整。

例如

.container{ 
    min-height:300px; 
    overflow:hidden; 
    width:500px; 
} 

如果你想确保所有的div显示出来,你可以尝试在div样式设置max-height属性。

例如

.div-3{ 
    background-color:#3399FF; 
    max-height: 200px; 
} 
+0

http://reference.sitepoint.com/css/min-height – 2009-10-28 22:31:58

+0

IIRC,IE6不支持最小高度和最大高度。 (IE6仍然有很多用户。)但我认为你可以在这里使用这个技巧来解决这个问题。 http://blog.whirix.com/2008/11/cross-browser-min-height-ie6-and-others.html – Nosredna 2009-10-29 13:59:03

+0

感谢您的提示。 – kafuchau 2009-10-29 14:25:23