How to make an element the full height of a page?

Question

Is there a way that I could set a DIV element to take up all the height on the page. Something like:

div.left {
  height: 100%;
  width: 50%;
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0;
}

I've Google'd it a few times but they all seem like really really complicated work arounds for what is probably a really really simple problem with a simple solution.

Answer 1

Make sure you set height: 100% to html and body so that the div has a context for height! Hope that helps.

Answer 2

If the div is a direct child of body, this works:

body, html {height: 100%; }
div { height: 100%; }

Otherwise, you have to keep adding height: 100% to each of it's parents, grandparents,... untill you've reached a direct child of body.

It's simple. For a percentage height to work, the parent must have a specified height(px, %... whichever). If it does not, then it's as if you've set height: auto;

Another way to do it is as you have in your answer: it's to give it an absolute position value, relative to the element that defines the page's height.

Answer 3

This is the simplest way to make a div take up the full height of a page.

height: 100vh;

vh is Viewport Height, and 1vh is equal to 1% of the height of the viewport. See here for more details on this and other units of measurement in CSS.