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

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.