basics 6: sticky footer

basics 6: sticky footer

An easy way to achieveĀ "sticky footer" -- wherein you want your footer to appear at the bottom of the page when your content is not "tall" enough to push it down far enough.

  • Set the min-height of your wrapper div to 100vh
  • Set header and footer to specific heights
  • use the calc() function to set the min-height of the content area to the height of the viewport minus the combined heights of the header and footer.
  • Requires the footer to be a specific height
  • Ideally, the header is also set to a specific height