отрегулируйте высоту "div" в соответствии с контейнером - PullRequest
0 голосов
/ 28 октября 2009

Как я могу сделать так, чтобы "div-3" в контейнере корректировался по высоте, которая у него есть.

Мне нужно соответствие высокого "div-3", оставленного div 1 и 2, независимо от того, что содержимое этого div-3 неполное.

Возможно, что div 1 или div 2 не отображаются (дисплей: отсутствует).

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>

1 Ответ

0 голосов
/ 28 октября 2009

Я не совсем уверен, что вы спрашиваете. Но, если в вашем CSS, вместо использования высоты, используйте min-height, если ваше содержимое div меньше указанной высоты, оно все равно заставит 300px, а если будет больше, оно автоматически отрегулирует.

, например

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

Если вы хотите убедиться, что все ваши div'ы отображаются, вы можете попробовать установить атрибут max-height в стилях div.

1012 *, например *

.div-3{
    background-color:#3399FF;
    max-height: 200px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...