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