Why doesn't height: 100% work to expand divs to the screen height?

css

responsive-design

best-practices

browser-compatibility

byNikita Barsukov·Dec 18, 2024

Set height: 100vh to a <div> to fill the screen height directly, bypassing any parental height restrictions.

.div-fullscreen {
    height: 100vh; /* Now you're playing with power! */
}

<div class="div-fullscreen"></div>

For ye olde browsers that don't support viewport height (vh), make sure all parent elements, including <html> and <body>, have their height: 100% set. This allows the div to scale to the full height.

CSS, children, and parental guidance

The height inheritance in CSS can challenge anyone—only when a parent's height is known does percentage height work as expected. Failing that, you might find height: 100% pulling a Houdini on you!

Common strategies for filling containers

Besides the swift solution above, we can work around this in many ways:

Use Flexbox

Flexing your layout muscles with display: flex and flex: 1 with flex-direction: column stretched to the parent makes the child div fill up the remaining space.

Grid your CSS

CSS grid layouts offer similar functionality, they're the "new black" for a reason! They support full viewport height control with display: grid and grid-template-rows: 100vh.

Media Queries

For a responsive design time, media queries ensure each device shows off your div to its full dimensionality!

Troubleshooting common pitfalls

Conflicts and Overrides in CSS

If your div isn't scaling, there's likely a conflict or override somewhere else in your CSS. Sherlock Holmes your way through your stylesheet!

Position Absolute

With elements positioned as absolute, ensure a defined height on the containing block, else you risk unleashing a size zombie apocalypse on your layout!

Min-Height on Body

For the optimal user experience, use min-height: 100vh on <body> rather than height: 100%. It prevents any ugly empty spaces when the content is smaller than the viewport.

Browser Compatibility

Stay aware of browser compatibility. A browser missing vh support can cause unexpected layout issues.

When JavaScript comes in

Relying solely on CSS might not cut it sometimes—use JavaScript to calculate and apply dynamic height on elements.

Utilising Frameworks and Grid Systems

Streamline your layout process with frameworks like Bootstrap. They come equipped with prescription layouts for common height issues.

Ensuring Accessible Design

Make your design inclusive to meet all your user's needs and preferences. Consider all forms of navigation, including those for screen readers.

SVGs & Optimised Images

Compliment your responsiveness with scalable SVG graphics. Optimise images to reduce load times, improving the overall webpage performance.

Mobile-First Design

With a mobile-first approach, ensure a smoother user experience on smaller screens. Prioritise layouts for mobile screens and then scale them up for larger ones.