0

I hope you are well.

I'm building a page in React that takes up 100% of the view height and has overflow disabled. My trouble comes when I have an animated Footer that the user can bring up that condenses the Content in order to make room for itself. I've described this in the following image. Please excuse the spelling errors.... I am incompetent. enter image description here

Right now, I've got the Header and Footer set to absolute and fixed to the top and bottom of the page respectively, and I'm trying to get Content to adapt using Flex grow, but thus far it seems unresponsive....

Thanks for your time!

PS

I'm pretty sure this sucker answers my question, but I haven't gotten any of the flex changes to take affect(effect?).

Make a div fill the height of the remaining screen space

ThirdGhostHand
  • 377
  • 5
  • 19

1 Answers1

1

Your footer and header as set to absolute thus they are excluded from flexbox layout. Remove position: absolute, set your main container (whatever it is that wraps all 3 of those) to display: flex; flex-direction: column, set desired height for your header and footer and then add flex-grow: 1 to your content container so that it takes entire remaining space

Max
  • 4,473
  • 1
  • 16
  • 18
  • You're a saint. – ThirdGhostHand Oct 29 '19 at 17:55
  • 1
    forgot to mention that this is not the best way to implement expanding footer: in reality, you dont want your content to adjust height based on footer height. You want header and footer absolute and content taking entire screen behind them. Sure, some part of the content will be hidden behind those two, that's why you'll add some padding to content to compensate. Advantage of this approach is that changing footer height doesn't cause layout re-calculations for content and works much smoother – Max Oct 29 '19 at 18:00