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

The ‘right’ behavior for a header
position: absolute;
height: 100%;
General layout
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;
}

--

--

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