Putting the footer at the bottom with a variable height header and overflow scroll content

Question

I've got an application with header that has variable height. The example I have here shows off some of that but it's not hardcoded like this but rather the header can change height depending on its inner content.

I then have a main content section that I want to be scrollable if there is more content than vertical space. And finally, a footer section that must always be at the bottom of the page. The footer's height is statically set and has one height change at a certain breakpoint.

Ideally, I would want the whole page not to be scrollable (only the content within the main section can be ).

I've been trying to hardcode the height changes as needed but quickly discovered that due to the unpredictable nature of the header height changes, doing math depending on breakpoints just isn't going to cut it.

Keeping the header as is, is there any other way to keep the footer at the bottom of the page while keeping a scrollable main content without having to hardcode all the breakpoint height calculations?

* {
  margin: 0;
  padding: 0
}

header {
  background-color: coral;
  height: 20px;
}

main {
  background-color: goldenrod;
  height: calc(100vh - 20px - 75px);
}

footer {
  background-color: cadetblue;
  height: 75px;
}

@media (min-width: 500px) {
  header {
    height: 40px;
  }

  main {
    height: calc(100vh - 40px - 50px);
  }
  
  footer {
    height: 50px;
  }
}

@media (min-width: 900px) {
  header {
    height: 60px;
  }

  main {
    height: calc(100vh - 60px - 50px);
  }
}

@media (min-width: 1200px) {
  header {
    height: 80px;
  }

  main {
    height: calc(100vh - 80px - 50px);
  }

}

@media (min-width: 1400px) {
  header {
    height: 100px;
  }

  main {
    height: calc(100vh - 100px - 50px);
  }
}

<html>
  <header>Variable height header</header>
  <main> Content </main>
  <footer>This is a footer</footer>
</html>

ray · Accepted Answer · 2023-03-16T22:30:51.127

You could make your layout occupy the full viewport height and use grid or flexbox to make the content area stretchy while keeping the header and footer fixed.

Setting overflow: auto on the content area will allow it to scroll as necessary.

html,
body {
  height: 100vh;
  margin: 0;
}

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

.container :is(header, footer) {
  flex: 0 0 auto;
  background: skyblue;
  padding: 1rem;
}

.container main {
  flex: 1 1 auto;
  overflow: auto;
}

.tall {
  min-height: 200vh;
  background-image: linear-gradient(180deg, skyblue 1px, transparent 1px);
  background-size: auto 25px;
  padding: 1rem;
  text-align: center;
}

<div class="container">
  <header>Variable height header</header>
  <main>
    <h1 class="tall">This element has a height on it to force scrolling and background lines to make the scrolling easier to see.</h1>
  </main>
  <footer>This is a footer</footer>
</div>

Putting the footer at the bottom with a variable height header and overflow scroll content

1 Answers1