adjust the height of the "div's" according to the container
How can I do to make the "div-3" in the container are adjusted for the height that this has.
I need the fit the high "div-3" left by div's 1 and 2, no matter what the content of this div-3 incomplete.
It may be that the div 1 or div 2 are not display (display:none).
Html code:
<!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{
backgro开发者_如何学运维und-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>
I'm not quite sure what you're asking. But, if in your CSS, instead of using height, use min-height, if your div contents are less than the specified height, it'll still force the 300px, and if it's greater, it'll automatically adjust.
e.g.
.container{
min-height:300px;
overflow:hidden;
width:500px;
}
If you're trying to make sure all of your divs show up, you could try setting a max-height attribute in the div styles.
e.g.
.div-3{
background-color:#3399FF;
max-height: 200px;
}
加载中,请稍侯......
精彩评论