根据容器调整“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>
答
我不太清楚你的要求。但是,如果在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;
}
您能否重新说明您的问题?你最后一句话是什么意思? – 2009-10-29 10:38:52