CODEWITHSUNDEEP
html
Joshua
Joshua

Reputation: 946

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

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.

Upvotes: 9

Views: 17109

Answers (5)

Ben Grzybowski
Ben Grzybowski

Reputation: 129

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.

Upvotes: 11

idmega2000
idmega2000

Reputation: 111

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.

Upvotes: 1

Paulo R.
Paulo R.

Reputation: 15609

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.

Upvotes: 15

ultranaut
ultranaut

Reputation: 2140

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

html {
  height: 100%;
}

body {
  height: 100%;
}

div.left {
  height: 100%;
}

Fiddle here.

Upvotes: 1

Rchristiani
Rchristiani

Reputation: 444

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

Upvotes: 1

Related Questions