Percentage values in CSS can be tricky. When you set the height CSS property of an element to 100% what exactly are you setting it to 100% of? That's the major question you run into when dealing with percentages in CSS, and as layouts become more complex, it becomes that much more difficult to keep track of percentages, resulting in some downright bizarre behavior, if you aren't careful.

Working with percentages does have a distinct advantage; percentage-based layouts automatically adapt to different screen sizes. That's why using percentages is essential in responsive design. Popular grid systems and CSS frameworks use percentage values to create their responsive grids.

Clearly, there are certain situations better suited to static values and others that work much better with something adaptive, like percentages. You'll need to decide which route to take with the elements in your design.

Static Units

Pixels are static. Ten pixels on one device is ten pixels on every device. Sure, there are things like density and the way a device actually interprets what a pixel is, but you won't ever see major changes because the screen is a different size.

With CSS, you can easily define an element's height in pixels, and it will remain the same. It's predictable.

div {

height: 20px;

}



That won't change unless you alter it with JavaScript or something similar.

Now, there's another side to that coin. It won't change. That means you'll need to measure out everything precisely, and even then, your site won't work across all devices. That's why static units tend to work better for child elements, media, and things that will start to distort and look strange if they stretch and grow.

Setting an Element's Height to 100%

When you set an element's height to 100%, does it extend to the entire screen height? Sometimes. CSS always treats percent values as a percentage of the parent element.

With No Parent Element

If you've created a fresh <div> that's only contained by your site's body tag, 100% will probably equate to the screen's height. That is unless you defined a height value for the <body>.

The HTML:

<body>

<div></div>

</body>



The CSS:

div {

height: 100%;

}



That <div> element's height will be equal to the screen's. By default, the <body> spans the entire screen, so that's the basis your browser uses in calculating the element's height.

With a Parent Element With a Static Height

When your element is nested inside another element, the browser will use the parent element's height to calculate a value for 100%. So, if your element is inside another element that has a height of 100px, and you set the child element's height to 100%. The child element will be 100px high.

The HTML:

<body>

<div id="parent">

<div id="child"></div>

</div>

</body>



The CSS:

#parent {

height: 100px;

}

#child {

height: 100%;

}



The height available to the child element is constrained by the height of the parent.

With a Parent Element With a Percentage Height

It might seem counter-intuitive, but you can set an element's height to a percentage of a percentage. When an element has a parent element that also has its height defined as a percentage value, the browser will use the same value as the parent, which it already calculated based on its parent. That's because 100% of a value is still that value.

<body>

<div id="parent">

<div id="child"></div>

</div>

</body>



The CSS:

#parent {

height: 75%;

}

#child {

height: 100%;

}



In this instance, the parent element's height is 75% of the entire screen. The child, then, is also 100% of the overall height available.

With a Parent Element With No Height

Interestingly, when the parent element doesn't have a defined height, the browser will keep going up level by level until it finds a concrete value that it can work with. If it makes it all the way up to the <body> without finding anything, the browser will default to the screen height, giving your element an equivalent height.

The HTML:

<body>

<div id="parent">

<div id="child"></div>

</div>

</body>



The CSS:

#parent {}

#child {

height: 100%;

}



The child element extends all the way to the top and bottom of the screen.

The Viewport Units

Because calculation with percentage units can be tricky, and each element's tied to its parent, there's a set of units that ignore all that and base element sizes directly off the available screen space. These are the viewport units, and they give you a direct size based on a screen's height or width, no matter where the element is located.

To set an element's height equal to the screen's height, set its height value to 100vh.

div {

height: 100vh;

}



It's easy to break your layout doing this, and you'll need to be aware of which other elements will be impacted, but the viewport is by far the most direct way to set an element's height to 100% of the screen.