Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > как растянуть div на всю высоту родителя

Автор: kb-nn 13.8.2013, 10:58

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

Код


<!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

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

Код


<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

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