div height 100 percent

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

fiddle is here

So, how can I make the two divs height 100 percent, i.e. from the bottom of image to the bottom of page.

Answer 1

There are a few options you may find useful:

vh (viewport height) vw (viewport width) vmin (viewport minimum length) vmax (viewport maximum length) Now, let’s have a look at a real example. Imagine you want to create a website with two sections, each one of them with the size of the browser window.

Here’s just a simplified code example of the HTML:

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

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

and here’s the CSS using vh:

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

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

You can see more in:

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

Answer 2

You need to set the height of html and body to 100% too before. Then you can set your element height 100%.

body, html {
    height: 100%;
}

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

Updated fiddle.