Make div the height of viewport

Question

I am designing a website and I would like the top to be the height of the viewport like this website.

How do I do something like that?

The bottom is always sitting on the bottom of my screen no matter what monitor I use?

Thanks

Answer 1

I know it's an old question, but you can also use vh (viewport height) units. It's supported by all modern desktop browsers, on mobile devices it may create some issues so work around it using media queries.

div {height:100vh;}

Meaning 100% of viewport height.

Here is a W3C draft specifying relative length units, and before you use any of them check Internet Explorer support as it doesn't support every single unit.

Answer 2

You can set a divider to be the same height as the window by setting:

html, body { height:100%; margin:0; padding:0; }
div { height:100%; }

This question gets asked a lot here, it's best to search first. :-)