Set Flexbox Min Height To Fill Remaining Screen in Scrolling Container

arhnee :

I am moderately familiar with Flex-box, but this issue has me baffled:

I am trying to create a flex-box layout that:

Puts a footer at the bottom of the screen IF content is shorter than the screen (view-port)
Puts footer at end of scrolling content IF content is longer than the screen (view-port)

I can seem to get one, or the other, but not both of these to work. A couple of goals:

Achieve this, if possible, in CSS alone
The header should remain fixed at the top of the screen, while the content has scrollable overflow
The header bar will vary in size, so the solution should accommodate this

Codesandbox Demo of Issue

Thanks for any help

Awais :

Set min-height to 100vh of #wrapper like

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

And alps you need to set margin of body to 0 to avoid scroll

body{
 margin: 0;
}

For sticky header as per OP Requirement Please add theses styles along with the above one i mentioned (i just remove height as you said header is of dynamic height)

#header {
    background-color: darkgray;
    /* height: 64px; */
    position: sticky;
    top: 0;
}

So the final Styles you need to put inside demo.css are as below

body {
  background-color: #444;
  margin: 0;}

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

#header {
    background-color: darkgray;
    /* height: 64px; */
    position: sticky;
    top: 0;
}