How to keep the footer in the right place (and maintain the sticky-top behavior of the header)

Sticky-top header

The ‘right’ behavior for a header
position: absolute;
height: 100%;

General layout

General layout

Finally, the well behaved footer

div class="body-wrapper">
<div class="header sticky-top">header</div>
<div class="content">Content</div>
<footer>The well behaved footer!</footer>
</div>
.body-wrapper {
position: absolute;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.content {
flex-grow: 1;
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is SaaS software? An ultimate guide to growing a business with cloud apps

Using GCP — GKE and GCS for checking validation of ICP domains.

InterSystems Grand Prix Programming Contest 2022

No more Copy & Paste: Sharing assets between Rails (and other) apps

A quick dip of Java — Chapter 1

What Is CDN?

Secure your Java Application by User Authentication!

READ/DOWNLOAD#? Enterprise Architecture As Strateg

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pedro Magalhaes

Pedro Magalhaes

More from Medium

How Browsers Work: The main flow

Figure: Webkit main flow

Styling the Squarespace Dropdown Menu

My review of The Odin Project: Foundations

How to Untangle Your Old Code

Tangled blue and green rope on a container