Make body have 100% of the browser height

A primer on CSS cascade and inheritance

To ensure your body can reach the full browser height, your CSS has to grasp the idea of cascade and inheritance. Applying a 100% height to the root, html, ensures all heights are computed accurately:

html { /* "html" says: "Who's your daddy?" */
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
}


Setting this up provides a consistent reference for the body to compute its percentage-based heights, leading to a full-height layout irrespective of the content size.

Handling long stories—content overflow

In real life, content can certainly overflow with verbosity. Content that's longer than the viewport calls for min-height rather than a fixed height. The min-height: 100vh; recipe lets the body stretch as needed, leaving no part of the story unread:

body {
  min-height: 100vh;
  padding: 0; /* No fancy borders around our story */
}


Keep both padding and margins for the body at zero to maintain accurate dimensions, eliminating that annoying horizontal scrolling.

Embracing cross-browser compatibility

Like it or not, browser incompatibilities are still a thing. Before using viewport units, check their support in various browsers on Can I use. If not fully supported, lean towards position: absolute; for a guaranteed full stretch:

body {
  position: absolute; 
  top: 0; 
  bottom: 0; 
  right: 0; 
  left: 0;
}


Be mindful though: absolute positioning can take the element out of the document flow, potentially muddling up layout of child elements.

Borrowing the power from display tables

Did you know? CSS display: table; can be your best friend when sizes must be dynamic. Coupled with display: table-cell;, it allows you to realize dynamic expansion with elegance:

html {
  display: table; /* Old school? Maybe. Effective? Definitely. */
  width: 100%;
  height: 100%;
}
body {
  display: table-cell;
  min-height: 100%;
}


Using this strategy, child elements with percentage heights encounter fewer issues, as they do not have to depend on the parent's explicit height.

Pitfalls and their antidotes

In your journey to reach full height, beware of common roadblocks:

Careless handling of overflowing content

Despite our best efforts, browsers may still misbehave when content overflows, leading to clipped texts or unwanted scrolls. Be sure to validate your styles across different browsers to avoid unpleasant surprises.

Unexpected child behavior

Children (read elements) with percentage-based heights can act out when parents use min-height instead of height. Always test with various content lengths to ensure consistent outcomes:

.child {
  height: 50%; /* Seems half-hearted? That's because `min-height` gets complicated */
}


Mobile viewport inconsistency

100vh can be fickle across mobile browsers, thanks to the hide-and-seek game played by address bars. Overcome this by using apposite CSS workarounds or JavaScript fixes as discussed in CSS-Tricks articles.