Figure out how to get the footer to stop jumping around

[csb324]

The footer jumps around. It bugs me, but maybe it doesn't bug anyone else?

[Nesciosquid]

Your app container is using flexbox, and the header div is set to flex-grow: 0, which means it'll always take up the same amount of space. The middle container is set to flex-grow: 1, so that it will flex to take up the rest of the space.

You can use something like this http://stackoverflow.com/questions/27433183/make-scrollable-div-take-up-remaining-height, moving the footer into the same flexbox container as the header and middle section, also with flex-grow: 0.

That way, the footer and header always stay the same size and on the top and bottom, and the middle section stretches to fill the remaining space. You'll probably want to set the middle section to overflow-y: auto and do some custom scrollbars so that sections with lots of links are scrollable.

FWIW: I tried to submit a pull request doing exactly this, but my SCSS is inadequate. I think you want something like...

<FlexContainer style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
  <Header style={{ flexGrow: '0' }} />
  <OuterContent style={{ flexGrow: '1', position: 'relative', overflow: 'hidden' }}>
    <InnerContent style={{ position: 'absolute', top: '0', left: '0', right: '0', bottom: '0', overflowY: 'auto' }} />
  </OuterContent>
  <Footer style={{ flexGrow: '0' }} />
</FlexContainer>