Home/ Questions/Q 440477
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T20:52:37+00:00

How can I do to make the div-3 in the container are adjusted for

  • 0

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{
    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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
}
    • 0