For div to extend full height

html

responsive-design

css-grid

flexbox

byNikita Barsukov·Nov 20, 2024

Use CSS height set to 100% to span a div over the entire height of its parent. Remember, this only works if the parent has a specified height. If you aim to stretch a div to cover the entire viewport height, employ vh units with height: 100vh.

.full-height {
  height: 100%; /* Used when parent height is specified. */
}

.viewport-height {
  height: 100vh; /* Stretches to entire viewport height */
}

Incorporate the class into your div:

<!-- Contained within a parent of fixed height -->
<div style="height: 300px;">
  <div class="full-height">Well, I'm a tall div!</div> 
  <!-- Ha! Bazinga! 😉-->
</div>

<!-- Covering entire viewport height -->
<div class="viewport-height">I can touch the sky! 🎈</div>

For nested divs, define height for all ancestor elements, or else height: 100% won't have any effect.

Tame the height: Meet the min-height property

In scenarios where div needs to adapt to varying viewport sizes, min-height: 100vh is your amigo. It makes sure your div covers up the entire viewport height – no ifs or buts.

.responsive-full-height {
  min-height: 100vh;
}

Sticky elements such as headers and footers could put a spanner in the works. Use calc in tandem with min-height to make room for the height of these elements:

.content-with-footer {
  min-height: calc(100vh - 50px); /* I spy with my little eye a 50px high footer 👀 */
}

Modern warriors: Flexbox and CSS grid

Want a responsive design without juggling around height calculations? flexbox and CSS grid to the rescue:

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.flex-item {
  flex: 1; /* Hulk mode: Takes up all available space 👊 */
}

When in Rome, reset your margins and paddings like the Romans:

html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Paves the way for full height child elements 🏁 */
}

Nitty-gritty details: Knowing the quirks

Chasing full-height perfection involves accounting for some intriguing nuances:

For iOS Safari, pair -webkit-fill-available with min-height for complete height coverage.
Be warned, viewport height inconsistency can cause problems, especially on mobile browsers. Look for silver bullets in Stack Overflow vaults, for instance.
Respect the overflow when going beyond 100% with div height.
For scalability, think rem for margins and paddings.
Set the height property to position: relative for parent containers if you're using min-height on child elements.

Here's a small piece to help you tackle mobile viewport challenges:

.full-height-mobile {
  min-height: 100vh; /* Default to full viewport height */
  min-height: -webkit-fill-available; /* Not all heroes wear capes, this is for iOS 🦸 */
}

The nifty implementations: Beating the quirks

Having a sound understanding of the basic HTML structure and default styles can be a game-changer:

Always close your HTML tags correctly – it's a matter of structure and not just etiquette 😉.
Make the main container's height 100% before tackling child div.
Explore background property for some engaging div stylings.
Don't forget to chalk out calculations for responsive designs across different devices.

Here is a typical structure and a reset of style you can start off with:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        /* Walk the runway with your styles 🎩 */
    </style>
</head>
<body>
    <div id="full">Guess who's full height now?! 😎</div>
    <!-- More content here -->
</body>
</html>