Fixed header, footer with scrollable content

css

responsive-design

best-practices

performance

byAnton Shumikhin·Nov 17, 2024

To create a fixed header and footer with a scrollable content section in between using CSS, set your header and footer to position: fixed;, positioning them to top: 0; and bottom: 0; respectively. Apply overflow-y: scroll; to your content and use height: calc(100vh - headerHeight - footerHeight); to adjust its size. Remember to add the appropriate padding to the content to ensure it doesn't overlap with the header/footer:

.header {
  position: fixed;
  top: 0;
  width: 100%; /* Because our design looks "full width" */
  height: 50px; /* This should match your actual header height */
  z-index: 10; /* Keeps the header at top, isn't it high time? */
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%; /* To keep things consistent */
  height: 30px; /* This should match your actual footer height */
  z-index: 10; /* Because we don't want the footer feeling left out! */
}

.content {
  padding-top: 50px; /* Let's give our content some space to breathe! */
  padding-bottom: 30px; /* Same as footer height */
  overflow-y: scroll;
  height: calc(100vh - 80px); /* Magic of calc, less math for you! */
  box-sizing: border-box; /* So padding doesn't add up to width/height */
}

Now wrap your page content within a <div class="content">. This layout ensures that the header and footer stay in place while the content scrolls.

When Flexbox meets scroll

Flexbox presents another flexible solution to this layout challenge. Handling dynamic heights more effectively, and responding well to screen size changes.

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

.header, .footer {
  flex-shrink: 0; /* Keeps your header and footer intact */
}

.content {
  flex-grow: 1; /* Let's your content take all the remaining space */
  overflow-y: auto; /* Enables scrolling only where needed */
}

No need to worry about manually calculating the content height using calc(), the browser does this for you!

Structured layouts with Grid

If you fancy more granular control over your grid items, CSS Grid is the perfect candidate for complex layouts.

.wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

.header {
  grid-row: 1;
}

.content {
  grid-row: 2;
  overflow-y: auto; /* And let there be scroll! */
}

.footer {
  grid-row: 3;
}

Ensure margin: 0 on the body, apply 100% height, and don't forget to set box-sizing: border-box.

Tricky considerations and tips

Cross-browser support: Remember to check CSS features compatibility on sites like caniuse.com.
Test through variety: Check compatibility across different screen sizes and devices.
Accessibility first: Make content accessible with screen readers and keyboard navigability.
Performance matters: Keep your layout simple to render pages faster.

Responsiveness with media queries

Utilizing media queries, you can ensure your design stays flexible across different devices.

@media (max-width: 768px) {
  .header {
    height: 40px; /* Catering to smaller screens */
  }
  .footer {
    height: 25px; /* Less height for lesser screen space */
  }
  .content {
    padding-top: 40px; /* Matched with header */
    padding-bottom: 25px; /* And footer */
  }
}

Debugging common issues

Overlapping content: Ensure equal padding and respective heights for fixed elements.
Scroll area: Set overflow on the content, not the parent.
Responsive woes: Make use of media queries, percentages, and viewport units.