VPF::как растянуть div на всю высоту родителя

kb-nn

Дата 13.8.2013, 10:58 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 227
Регистрация: 23.12.2003
Где: Нижний Новгород

Репутация: нет
Всего: 1

помогите, пожалуйста.
Код:

Код


<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
body {background:#aaa; margin:0;}
#d_all {background:white;width:90%;margin-left:auto; margin-right:auto;margin-top:3px;margin-bottom:3px;}
#d_left {width:195px;float:left;background:white;}
#d_right {margin-left:195px;background:white;}
</style>
</head>
<body>
<div id="d_all">
<div id="d_left"> 1<br> 1<br> 1<br> 1<br> 1<br></div>
<div id="d_right">   12<br></div>
</div>
</body></html>

нужно, чтобы, если максимальная из высот d_left и d_right не превышает высоты экрана, то они бы простирались до низу экрана
если же хотя бы одна из них выходит за пределы экрана, то всё бы равнялось по наибольшей высоте.

skyboy

Дата 13.8.2013, 15:04 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260

не уверен насчет кроссбраузерности, тестировал только в Хроме

Код


<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

Код


html, body {
    height: 100%;
}
.parent {
    background-color: #FF0;
    min-height: 100%;
    overflow: hidden;
}
.left {
    width: 50%;
    height: 300px;
    float: left;
    background-color: #F0F
}
.right {
    width: 50%;
    height: 200px;
    float: right;
    background-color: #0FF
}

но вообще говоря, я бы заюзал flex-box вместо float+overflow:hidden

kb-nn

Дата 13.8.2013, 15:33 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 227
Регистрация: 23.12.2003
Где: Нижний Новгород

Репутация: нет
Всего: 1

спасибо большое, всё работает.

Это сообщение отредактировал(а) kb-nn - 13.8.2013, 18:11

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »