100% Min Height CSS Layout

Immovable headers and footers

Have a immoveable header or footer? Subtract their heights from the min-height using CSS’s calc() function to ensure They don’t spill over the screen.

.content {
  min-height: calc(100vh - (80px + 70px));  /* header height + footer height */
}


Adaptive content sizing

When working with content whose size can't be predetermined, opt for the calc() function to dynamically substitute the min-height whilst accommodating fixed headers and footers:

.content {
  min-height: calc(100vh - (height_of_header + height_of_footer));
}


Overflow management

Handle overflow effectively with timely scrolls to ensure user experience isn't compromised:

.content {
  min-height: calc(100vh - (height_of_header + height_of_footer));
  overflow-y: auto; /* The scroll appears when the flood comes in */
}


Cross-browser compatibility

Anticipate the unpredictable: verify your layout's adaptability by testing with varying text sizes and window dimensions:

.container {
  min-height: 100vh;
  -webkit-min-height: 100vh; /* Old WebKit browsers still on your invite list */
  -moz-min-height: 100vh; /* Mozilla fans, check! */
  -ms-min-height: 100vh; /* For the die-hard Microsoft users */
  box-sizing: border-box; /* Fuss-free height calculation */
}


Smart practices

Parent-child height inheritance

To allow child elements to inherit parent height, demand a minimum out of the parent and let the percentage do the talking:

.parent {
  min-height: 1px; /* Minimal ask for full inheritance rights */
}
.child {
  height: 100%; /* Full height inheritance */
}


Footer stickiness

Make your footer stick to the bottom of the page, regardless of content size, by using flex-grow:

body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1; /* Making room at the bottom or stretching up */
}


Visual demos

Refer to practical visual demos to understand fluid CSS layout implementations.