CSS
How Do You Give 100% Height and Width in CSS?
Setting an element to take up 100% of the height and width of its container—or even the entire screen—is a common need in web design. Whether you’re creating a fullscreen background, a flex layout, or a responsive hero section, CSS gives you the tools to do it—if you understand how sizing works.
In this blog post, we’ll walk through how to set height: 100% and width: 100% correctly, including tips, examples, and common mistakes to avoid.
✅ Basic Syntax
.element {
width: 100%;
height: 100%;
}
Sounds simple, right? But for it to work correctly, the parent element must also have a defined size—especially for height.
📏 How Width: 100% Works
Setting width: 100% makes an element stretch to fill the entire width of its parent.
✅ Example:
.container {
width: 500px;
}
.box {
width: 100%;
background-color: lightblue;
}
Here, .box will be exactly 500px wide.
📏 How Height: 100% Works
Unlike width, height: 100% requires that the parent element has a defined height—otherwise, it won’t have anything to base its percentage on.
✅ Example:
html, body {
height: 100%;
margin: 0;
}
.fullscreen {
height: 100%;
background: lightgreen;
}
In this example:
htmlandbodymust both be set toheight: 100%so the.fullscreendiv knows how tall it should be.
🧪 Fullscreen 100% Width and Height Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html, body {
height: 100%;
margin: 0;
}
.full {
width: 100%;
height: 100%;
background: #007bff;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="full">100% Width and Height</div>
</body>
</html>
This example makes the .full div cover the entire screen, both vertically and horizontally.
🔄 Alternative: Viewport Units
Instead of relying on parent sizing, you can use viewport units:
.fullscreen {
width: 100vw;
height: 100vh;
}
| Unit | Description |
|---|---|
vw | 1% of viewport width |
vh | 1% of viewport height |
This method is especially useful for fullscreen backgrounds, splash screens, and landing sections.
🚫 Common Mistakes to Avoid
| Mistake | Fix |
|---|---|
height: 100% with no parent height | Set parent to height: 100% |
Using height: 100% on inline elements | Set display: block or flex |
| Forgetting to reset default body margins | Use margin: 0 on body |
✅ Summary
| Task | CSS Code |
|---|---|
| Full width | width: 100% |
| Full height (requires parent) | height: 100% + parent height |
| Fullscreen | width: 100vw; height: 100vh; |
🚀 Final Thoughts
Setting width: 100% is usually simple, but getting height: 100% to work correctly requires the parent to have a defined height. Use viewport units (vh, vw) for full-page elements and set html, body to 100% height when needed.
💡 Pro tip: Use
box-sizing: border-boxto ensure padding and borders don’t push your 100% elements beyond their intended size.