высота DIV 100 процентов

Question

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

скрипку here

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

Answer 1

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

body, html { 
    height: 100%; 
} 

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

Updated fiddle.

Answer 2

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

В.Х. (высота окна просмотра) оч.сл. (ширина окна) Vmin (окно просмотра минимальная длина) Vmax (окно просмотра максимальная длина) Теперь давайте посмотрим на настоящий пример. Представьте, что вы хотите создать веб-сайт с двумя разделами, каждый из которых имеет размер окна браузера.

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

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

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

и вот CSS, используя ВХ:

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/