DEV Community

Cover image for 🧱 Ensuring Full-Height Layouts: Why Your First Child Isn’t Stretching Like You Think
Nwulu Uchechukwu Prince
Nwulu Uchechukwu Prince

Posted on

🧱 Ensuring Full-Height Layouts: Why Your First Child Isn’t Stretching Like You Think

#webdev #html #css

When building landing pages or hero sections, a common expectation is that the first <div> inside the <body> should stretch to the full height of the viewport. Simple, right? Just slap on height: 100% and move on.
But many frontend developers quickly realize... it doesn’t work.

In this post, I’ll walk you through:

  • Why this layout bug happens
  • The correct way to fix it
  • Real-world use cases

Bonus tip: Why :root { height: 100% } might help when html { height: 100% } doesn’t.

🎯 The Common Setup

A developer might start with this HTML/CSS:

<body>
  <div class="main-content">Hello, World!</div>
</body>
Enter fullscreen mode Exit fullscreen mode 
.main-content {
  height: 100%;
  background: lightblue;
}
Enter fullscreen mode Exit fullscreen mode

Expected: The blue background fills the screen
Actual: The content takes only as much height as its children — definitely not 100% of the viewport.

❌ Why It Doesn’t Work

Because height: 100% on .main-content means:

"Be 100% as tall as my parent"
But if neither html nor body has an explicit height, .main-content has no reference point to calculate that 100%.

âś… The Correct Solution

Set the height of html and body to 100%:

html,
body {
  height: 100%;
  margin: 0;
}

body > div:first-child {
  min-height: 100%;
  background: lightblue;
}
Enter fullscreen mode Exit fullscreen mode

đź’ˇ min-height allows the content to grow if necessary but still ensures full viewport coverage.

🆚 min-height: 100% vs 100vh

Both are valid, but behave slightly differently:

  • 100vh is fixed to the viewport height (useful for hero sections).
  • min-height: 100% is relative to the parent’s height (better for layouts that might grow with content. Example: 
.main-content {
  min-height: 100vh; /* or use 100% with proper html/body setup */
}
Enter fullscreen mode Exit fullscreen mode

⚠️ Bonus: When :root { height: 100% } Works But html { height: 100% } Doesn’t

In component-based frameworks (like Vue, Nuxt, or React), styles might be scoped, meaning selectors like html or body don’t apply unless explicitly defined in global CSS.

Why :root sometimes works better:

  • It selects the html element but has slightly higher specificity
  • It’s less likely to be overridden by resets or scoped styles 
:root {
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Use :root as a fallback or if you’re unsure about where your global styles are applied in your app structure.

🧠 Final Thoughts

Layout bugs like this can be frustrating, especially when the fix seems “obvious.” But understanding inheritance, box models, and scope helps demystify these quirks.

Next time your section isn’t filling the screen, ask:

  • Did I set height: 100% on both html and body?
  • Is my layout in a scoped or modular system like Vue?
  • Should I use :root for more reliable global styling?

Top comments (0)