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

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

1. Puts a footer at the bottom of the screen IF content is shorter than the screen (view-port)
2. 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 acmodate this

Codesandbox Demo of Issue

Thanks for any help

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

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

1. Puts a footer at the bottom of the screen IF content is shorter than the screen (view-port)
2. 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 acmodate this

Codesandbox Demo of Issue

Thanks for any help

• javascript
• html
• css
• reactjs
• flexbox

• 1 Is this what you need? codesandbox.io/s/… If so, I will explain it below. – fjplaurr Commented Mar 2, 2020 at 13:43
• Ok. Done below. I also changed the background-color of #scrollingSegment but just to make it look nicer. – fjplaurr Commented Mar 2, 2020 at 14:13
• I previously marked this question as answered - but just realized an issues remains. With the suggested solutions so far, the header is no longer fixed (which is a requirement). This is still an open question. Apologies @awais for the false-start. I have updated the question to increase clarity on this – arhnee Commented Mar 2, 2020 at 15:12
• @arhnee Sorry for not including that earlier, i update my ans with fixed dynamic header please have a look :) – Awais Commented Mar 3, 2020 at 5:40
• @Awais - perfect, thanks! I just marked your reply as the answer. For everyone's benefit, here is a codesandbox with the full working solution: codesandbox.io/embed/… – arhnee Commented Mar 3, 2020 at 9:17

4 Answers 4

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;
}

Are you looking to scroll only content?. change these css only.

#mainContent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: white;
  height:100vh;
 }

#footer {
  background-color: red;
  height: 64px;
  position:fixed;
  bottom:0;
}

body {
  background-color: #444;
  position: relative;
  margin: 0;
  min-height: 100vh
}

#footer {
  background-color: red;
  height: 64px;
  width:100%;
  left: 0;
  position:  absolute;
  bottom:0;
}

There is a solution when we want our footer to be on the bottom of the screen even when the content of our flexbox wrapper is shorter than the height of our screen.

The solution is to create a div (we can call it spacer) just above the fotter and give it a css property flex: 1 (Which is a shortcut for flex-grow:1, flex-shrink:1 and flex-basis:0). If you think about it, what we want is to make our div spacer grow or shrink with the content.

In summary, I added:

CSS

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

TSX

<div className="spacer" />

A plete example can be found here