CODEWITHSUNDEEP
htmlcssheightviewport
Ollie2619
Ollie2619

Reputation: 1295

Make div the height of viewport

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

Upvotes: 18

Views: 33437

Answers (2)

Enis P. Aginić
Enis P. Aginić

Reputation: 975

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.

Upvotes: 45

James Donnelly
James Donnelly

Reputation: 128791

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. :-)

Upvotes: 7

Related Questions