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.

Solution 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.

Solution 2

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.

Solution 3

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

Solution 4

Pretty sure you need to set the html and body to 100%:

html {
  height: 100%;
}

body {
  height: 100%;
}

div.left {
  height: 100%;
}

Fiddle here.

Solution 5

This problem can be solved using CSS flexbox. Go through the w3schools documentation of flexbox here and another helpful link css-tricks here

In this scenario.

put display: flex; in the parent div container

div.container{
  height: 100%;
  display: flex;
}

then in the child div put display: 1;

div.left{
  height: 100%;
  display: 1;
}

note that if the height of the parent div container is set dynamically, the child div will always have the same height as the parent.

View more solutions

Comments

[ThunderBird]

Please, can you be elaborate on the stated answer..? Like I will like to know why 100vh worked but 100% didn't. Thanks.

[CoderMan]

@ThunderBird Super late but I just found out the reason this works is because by default the body and html tags don't have a size till content is inside, so just calling 100vh tells the div to follow the viewport size instead of checking the size of the parent elements.