Make div 100% height of browser window

I have a layout with two columns - a left div and a right div.
The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now the background-color ends at the last piece of content in that div.
I've tried height:100%, min-height:100%; etc.

Best Answer:

There are a couple of relatively new CSS3 measurement units called:

Viewport-Percentage (or Viewport-Relative) Lengths

What are Viewport-Percentage Lengths?

From the linked W3 Candidate Recommendation above:
           The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

How can this be used to make a divider fill the height of the browser?

For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:

HTML

<div></div>

CSS

div {
    height:100vh;
}
This is literally all that's needed. Here is a JSFiddle example of this in use.

What browsers support these new units?

This is currently supported on all up-to-date major browsers apart from Opera Mini and Android Browser. Check out Can I use... for further support.

How can this be used with multiple columns?

In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw.

How is 100vh different to 100%?

Take this layout for example:
<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>
The p tag here is set to 100% height, but because its containing div has 200px height, 100% of 200px becomes 200px, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height. Take a look at this accompanying Fiddle to easily see the difference!

What exactly is vmin and vmax?

1vmin assumes a value of the smallest between 1vh and 1vw.
1vmax assumes a value of the largest between 1vh and 1vw.
Especially usable for font-size.
*Note that these CSS3 units work dynamically in Firefox, but other browsers require refreshing the page.


http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window


TAGS : | | |