Высота div 100%

<img id='imgT' src="...">

<div id="divL"></div>
<div id="divR"></div>

CSS

body{
    max-width:1024px;
}
#imgT{
    width:100%;
    border:thin solid blue;
    display:block;
}
#divL{
    width:20%;
    height:100px;  // I need 100%
    background:#008080;
    float:left;
}
#divR{
    width:80%;
    height:100px;  // I need 100%
    background:blue;
    float:left;
}

скрипт здесь

Итак, как я могу сделать две divs высотой 100 процентов, т.е. снизу изображения в нижней части страницы.

Ответ 1

Вам нужно установить высоту html и body до 100%. Затем вы можете установить высоту элемента 100%.

body, html {
    height: 100%;
}

#divL, #divR {
    height: 100%;
}

Обновлен скрипт.

Ответ 2

Есть несколько вариантов, которые могут вам пригодиться:

vh (высота видового экрана) vw (ширина видового экрана) vmin (минимальная длина окна просмотра) vmax (максимальная длина окна просмотра) Теперь давайте взглянем на реальный пример. Представьте, что вы хотите создать веб-сайт с двумя разделами, каждый из которых имеет размер окна браузера.

Вот просто упрощенный пример кода HTML:

<div id="welcome">
   your content on screen 1
</div>

<div id="projects">
   your content on screen 2
</div>

и использует CSS с помощью vh:

div#welcome {
    height: 100vh;
    background: black;
}

div#projects {
    height: 100vh;
    background: yellow;
}

Вы можете увидеть больше в:

http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/