Why Does Percentage Height not Work in CSS?

Why Does Percentage Height not Work in CSS?

You might find that the element’s height with a percentage doesn’t work. To fix this, it is important to know why and how this happens. In this blog, we will discuss simple ways to fix this issue with examples of where the percentage height fails.

Table of Contents:

Understanding How CSS Handles Percentage Heights

It is important to know how CSS handles height values before fixing the issue. Let’s say that when you set the element height as a percentage, the browser makes this out based on the height of its parent element. If the parent element does not have a set height, the height based on percentage won’t work. 

The Parent Dependency Issue

While percentage width works based on the viewport or parent block, percentage height needs the parent element to have a defined height. If the parent element’s height isn’t set, the browser can’t calculate the child element’s height.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Percentage Height Issue</title>
    <style>
        .container {
            width: 100%;
            height: auto; 
            background-color: lightgray;
        }
        .child {
            width: 50%;
            height: 100%;
            background-color: lightblue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child">Child Element</div>
    </div>
</body>
</html>

Output:

The Parent Dependency Issue Output

In this example, .child is set to height: 100%, but because .container has no height, the child element does not get the expected height.

Methods to Fix Percentage Height 

You can define an explicit height by using vh units, flex, and grid layout for this purpose. Let us discuss these methods below: 

Method 1: Define an Explicit Height on the Parent

You can set the height of the parent element to make the percentage height work. If you want the child element to have a percentage height, make sure the parent has a fixed height. 

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min-Height Example</title>
    <style>
        .container {
    width: 100%;
    height: 500px; /* Fixed height instead of min-height */
    background-color: lightgray;
}
        .child {
    width: 50%;
    height: 100%; /* Matches exactly */
    background-color: lightblue;
    font-size: 20px;
}

    </style>
</head>
<body>
    <div class="container">
        <div class="child">Child Element</div>
    </div>
</body>
</html>

Output:

Define an Explicit Height on the Parent Output

Explanation: You can use this code to create a child element that is half the container’s width and as tall as the container.

Method 2: Use vh (viewport height) Units

You can use this method to make an element’s height depend on the viewport instead of its parent.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Viewport Height Example</title>
    <style>
        .full-screen {
            height: 100vh;
            background-color: lightblue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="full-screen">This div is full height of the viewport.</div>
</body>
</html>

Output: 

Use vh (viewport height) Units Output

Explanation: This code makes the div element take the full height using the 100vh

Method 3: Use display: flex on the Parent

You can use flexbox to make child elements get stretched easily so that you can make them fit inside the parent container. 

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            background-color: lightgray;
        }
        .child {
            flex: 1;
            background-color: lightblue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child">Flex Child</div>
    </div>
</body>
</html>

Output:

Use display: flex on the Parent Output

Explanation: The container is created with the flexbox layout to fill the full viewport height. You can see the child element takes all the available space. 

Method 4: Use CSS Grid 

The CSS grid can be used by the user to make sure the element fills the full height of its container.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
    <style>
        .container {
            display: grid;
            grid-template-rows: 1fr;
            height: 100vh;
            background-color: lightgray;
        }
        .child {
            background-color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child">Grid Child</div>
    </div>
</body>
</html>

Output:

Use CSS Grid Output

Explanation: This makes sure the layout is flexible for controlling the child’s height because the container is created by the CSS grid to take the full height of the viewport. 

Conclusion

You can use methods such as explicit height, vh units, flex, and grid layout to make the element take full height. Percentage-based heights let elements adjust based on the size of their parent or the viewport, making the layout adaptable to different screen sizes. 

Why does percentage height not work in HTML/CSS? – FAQs

Q1. Why isn't my percentage height working?

The percentage height is not working because the parent element might not have a fixed height.

Q2. What happens if the parent has no defined height?

In this case, the child element’s percentage height is turned to auto, where it takes the content height.

Q3. Can I use percentage height with min-height or max-height?

No, percentage height only works with height. Using min-height or max-height alone won’t have any reference height.

Q4. How can I make percentage height work for nested elements?

Make sure every parent element up the hierarchy has a defined height.

Q5. Does percentage height depend on other CSS properties?

Yes, properties like position can influence how height is calculated.

About the Author

Technical Research Analyst - Full Stack Development

Kislay is a Technical Research Analyst and Full Stack Developer with expertise in crafting Mobile applications from inception to deployment. Proficient in Android development, IOS development, HTML, CSS, JavaScript, React, Angular, MySQL, and MongoDB, he’s committed to enhancing user experiences through intuitive websites and advanced mobile applications.

Full Stack Developer Course Banner