Make div the height of viewport

html css height viewport
Ollie2619 picture Ollie2619 · Feb 20, 2013 · Viewed 20.3k times · Source

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

Enis P. Aginić picture Enis P. Aginić · Jun 29, 2015

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.

Related questions

How to make a div 100% height of the 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 …

Read More
Make body have 100% of the browser height

I want to make body have 100% of the browser height. Can I do that using CSS? I tried setting height: 100%, but it doesn't work. I want to set a background color for a page to fill the entire browser window, …

Read More
How to get div height to auto-adjust to background size?

How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it?

Read More