【CSS】How to Set Element Height to 100%｜Using h-100 and h-50
This guide explains how to set an element's height to 100% using the CSS classes h-100 and h-50. By doing so, the height of the element will match the height of the parent container.
🔹 Code Example
<div class="container">
<div class="h-100">This element will be 100% height.</div>
<div class="h-50">This element will be 50% height.</div>
</div>
<style>
.container {
height: 300px;
}
.h-100 {
height: 100%;
}
.h-50 {
height: 50%;
}
</style>
💻 Full Working Code (Copy-Paste to Make it Work)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>100% and 50% Height Elements</title>
<style>
.container {
height: 300px;
border: 2px dashed #000;
}
.h-100 {
height: 100%;
background-color: #90EE90;
padding: 1rem;
}
.h-50 {
height: 50%;
background-color: #ADD8E6;
padding: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="h-100">This element will be 100% height.</div>
<div class="h-50">This element will be 50% height.</div>
</div>
</body>
</html>
🧩 Application and Usage
height: 100%; is one of the most fundamental ways to adjust the height of an element to match the height of its parent container. It is particularly useful when you want an element to occupy the entire height of the parent container.
📱 Responsive Design
h-100 is very effective in responsive designs. By using h-100, you can adjust the height of elements in a way that responds to different screen sizes, such as for mobile devices.
By using this class, you can ensure the element's height adjusts to the parent container, making vertical layouts more consistent.
Copied!