How to fix CSS height 100 not working

Fix issues with setting height 100%. This post goes over four steps to identify and fix setting height 100.

Dec 9, 2022 | Read time 8 minutes

🔔 Table of contents

One frustrating thing when design web pages is the height 100% not working correctly. For example, the content overflows from the parent!

The main reason why using CSS height:100 property is not working for your design is mainly due to how the parent is structured.

This post will go over a few steps or checklist on how to approach this issue.

Steps to take to fix height 100% not working issues

  1. Check that the HTML and CSS is valid - no typos, and use on non-replaced inline elements
  2. Check the parent element height. The additionally, check if there is content in the element.
  3. Are you using min-height or max-height? These properties override the values of height.
  4. Remove height settings if using flex layouts.

Check that the HTML and CSS is valid!

CSS height property can be applied to all elements and controls the height of the content area.

The first thing to check when it is not working is to check the syntax. Check that you are not having any typos, or using invalid values, etc:

/* unit values */
height: 120px;
height: 10em;
height: 100vh;

/* percentage value */
height: 75%;

/* Keyword values */
height: max-content;
height: min-content;
height: fit-content(20em);
height: auto;

When using percentages (%), also make sure that you are specifying the number correctly. The following will not be valid numbers to use for percentages:

height: 12.%         ❌ Decimal points must be followed by at least one digit.
height: +-12.2%      ❌ Only one leading +/- is allowed.
height: 12.1.1%      ❌ Only one decimal point is allowed.

Tip: Height will not work with non-replaced inline elements.

According to the spec (https://w3c.github.io/csswg-drafts/css-sizing/#preferred-size-properties) height will not work with non-replaced inline elements.

So what is a “replaced” element then? A replaced element is something thats got content outside of our CSS formatting model - this could mean IMG, VIDEO, IFRAME, etc. Those elements load content from an external source (eg from a CDN). Most HTML elements are “non-replaced”!

An inline element is one that has the default display of inline-table or inline-block.

Generally speaking, examples of “non-replaced inline” element can be elements such as a, b, cite, def, em, etc.

Check the parent element height

When we set an element to be height:100%, we need to consider the parent element. According to the specifications, when using percentages, the height is calculated as the percentage of the containing block’s height.

In most cases, we need to explicitly specify the height of the parent element (body and html tag) to height:100%.

Take the following example when specifying height 100% on the .main class is not working:

html, body{
   /* ❌ Will not work since no height specified here. */
}

.main{
  background: lemonchiffon;
  height:100%;
}

To fix this, we specify a height for the <html> and <body> tags:

html, body{ 
  height:100%; /* ✔️ Height specified - will fix issue */
}

Tip: Make sure to specify the height of both body and html tags

Are you using min-height or max-height?

An example of when height 100% will not work is when you have not properly used the min-height or max-height. Lets consider the following code that will not work:

html, body{
   min-height:100%; /* ❌ Will not work since no height specified here. */
}

.main{
  background: lemonchiffon;
  min-height:100%; /* ❌ Will not work since no parent has no explicit specified. */
}

Similar to the previous example, since the <html> and <body> tags do not specify the height value, the height:100% on the .main class will not take effect.

The min-height CSS property just sets the minimum height of the element. To fix this, we just change the min-height to height on the html and body tags.

html, body{
   height:100%; /* ✔️ Height on the parent will fix this issue. */
}

.main{
  background: lemonchiffon;
  min-height:100%; /* ✔️ Will work since parent now has explicit height */
}

Remove height settings if using flex layouts

A common misunderstanding with height 100% issues is when we are combining it with flex layouts.

<div class="container">
  <div class="flex-1"></div> <!-- ❌ This is not appearing. -->
  <div class="flex-2">
    <p> .... </p>
    <p> .... </p>
  </div>
</div>

From the example, we cannot see .flex-1 is not appearing at all. We can see that the width for .flex-1 is being applied but not the height 100% setting.

.container{
  display:flex;
}
.flex-1{  
  background-color: blue;
  height: 100%; /* ❌ This class is not appearing due to this height 100% setting here */
  width: 250px;
}

.flex-2{
  background-color: lemonchiffon;
}

To fix this, we just need to remove the height:100% and we can see that the .flex-1 with background of acqua is now appearing.

Why does this work? When using flex the align-items control the vertical behavior.

This has the default value of stretch so it just works naturally.

When we introduce height:100%, this overrides the flex calculation.

The calculation of the height of .flex-1 now depends on the parent element (.container).

Since the parent does not have a explicit height -> the child element’s height becomes zero.

Tip: Use vh instead of height 100% percentage

vh is the height of the viewport. This will give you a element that covers the height of the viewable area of the screen and would have the intended effect of filling the whole page.

Additionally, depending on the device and orientation, you may want to use vm (eg landscape)

Browser suppport

  • height is widely supported with modern browsers and older versions. This is because this value has been fundamental and exists ever since the CSS1 specifications
  • some issues with IE10 and IE11 do not appear to support overriding min-width or max-width values using the initial value.
  • max-width doesn’t work with images in table cells in IE.

Summary

In this post we looked at a common issue with web design of setting height 100. The most common reason is that the parent element is not explicitly setting the height.

Changing the <html> AND <body> tags to have height:100% will mostly fix the majority of styling issues. Other issues arise when we use flex layouts. It is recommended not to mix height:100% with flex layouts since flex items come initially with align-items:stretch.

Additionally misuse of the min-height and max-height properties can cause issues. These properties can override the height values.

👋 About the Author

G'day! I am Huy a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

Follow along on Twitter , GitHub and YouTube

👉 See Also 👈