100% height minus header?

html

responsive-design

css-grid

css-flexbox

byAnton Shumikhin·Jan 24, 2025

Want your content to fit neatly below your header? Combining vh units and calc() in CSS will serve you well. Take a look:

.container {
  /* Who spilled coffee and left this line here? */
  height: calc(100vh - 50px); /* 50px: a placeholder for your own header height */
}

Your container gracefully spans the full viewport height (100vh), minus the height of your header. Voila! Your content area fits the remaining screen real estate like a glove.

Note: Not all browsers like to play nice. Ensure spaces are present around the '-' operator in calc().

Cracking the vh and calc() code

Got 1% of the viewport height? That's 1vh to you, buddy. Throw in calc() to perform on-the-fly calculations for CSS property values, and you're unstoppable.

Flexing with CSS Flexbox

Your layout wants complex yoga poses? Flexbox is your yoga master. If you have a header in a flex container, this code will help your content fluids flow:

body { /* This body's got some flex appeal */
  margin: 0; 
  display: flex; 
  flex-direction: column; 
  height: 100vh; 
}
header {
  /* Plug in your header styles, then take a break. You deserve it */
}
.main-content {
  flex: 1; /* Hah! Watch me take up all the remaining space */
  overflow: auto; /* Scrolls on demand. Like a well-trained dog */
}

Getting all aboard the CSS Grid

If Flexbox is a power yoga master, CSS Grid is like managing a symphony. It's all about precision:

body { 
  display: grid; /* Not just any body, but a grid body! */
  grid-template-rows: 50px 1fr; 
  height: 100vh; 
  margin: 0; 
}
header { /* Header, meet your row */
  grid-row: 1; 
}
.main-content { /* Main content, its your time to shine */
  grid-row: 2; 
  overflow: auto; /* I can't stand not being scrollable */
}

When CSS leaves you hanging

When CSS ends its shift for the day, JavaScript clocks in. Especially handy for dynamically adjusting layouts for those times when your header sizes have commitment issues:

window.onresize = function() {
  /* New header heights got your layout in a twist? JavaScript to the rescue! */
  var headerHeight = document.querySelector('header').offsetHeight;
  var content = document.querySelector('.main-content');
  content.style.height = `calc(100vh - ${headerHeight}px)`;
};

Dealing with antiquated browser relics

Getting cold sweats thinking about old versions of IE? Fallback methods like absolute positioning and margins can be your safety net. Include a fallback for calc() using JavaScript to keep all browsers playing by your rules.

Real-life challenges

Life doesn't hand out sticky headers and dynamic content issues on a silver platter:

With Sticky headers, the flow could be disrupted. Make content scrollable under the header by using position: sticky and setting a top CSS property.
For dynamic content, you might need JavaScript to adjust the main content padding-top or margin-top to accommodate changing header sizes.

Expanding content versatility

What if the content needs to scroll independently from the header, especially in visual-heavy designs like dashboards?

Applying overflow: auto; to the content container lets it scroll independently.
Using Fixed positioning with top and bottom properties coupled with overflow: auto; creates a fully scrollable content pane that respects header's personal space.