How to Make Div Element 100% Height of Browser Window Using CSS Only

By admin / 12:42 am, 4 Apr 2016 / CSS / 0 Comment

There are many ways to make the height of your HTML elements to be exactly as the height of the browser screen, regardless of the screen resolution, browser, device, etc. Many of these options use JavaScript to find out the height of the window. But there’s a way to do this with pure CSS only.

What is Viewport-Percentage (or Viewport-Relative) Lengths?

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.

So, by using viewport-percentage lenghts, HTML elements adjust automatically when the height or width of the screen changes.

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:

and here’s the CSS using vh:

That’s it.

Previous Post
Next Post