How to push a footer to the bottom of page when content is short or missing?

Question

I have a page with an outer div that wraps a header, content and footer div. I want the footer div to hug the bottom of the browser, even when the content div is not tall e

Answer 1

Use a blank div with flex-grow:1 to fill unused spaced right before the footer.

  Any content you want, 
  put it here. Can be wrapped,
  nested, whatever.





Always way at the bottom

Extract the styles to css as needed. This works by setting as display:flex;