Footers

[mahmoud]

Great project! One request:

Over the years, footers have really given people a heck of a time, myself included. Would you mind adding idiomatic footers to your app potions? I'm hoping there's an opportunity for some applied magic. :)

Thanks!

[adamschwartz]

Off the top of my head, there are three pretty solid approaches to solving the so-called “Sticky Footer” problem, to which I assume you’re referring:

1. Use flexbox. One advantage of this method is that it works for a footer with arbitrarily contents. One potential disadvantage is that some have warned about performance issues with using flexbox for page layouts.
2. Set html, body { height: 100vh }, absolutely position the footer, and add space below the content (apply a fixed padding, render a pseudo-element with a fixed height, etc.) which matches the height of the footer contents (demo). This has the downside of duplicating the knowledge of footer content to spacer height. It is however a very simple solution which works in very old browsers (substituting 100% for 100vh if older browsers are required).
3. Similar to 2, you could instead apply main { min-height: calc(100vh - footerHeight) } to force the height of the main content area to be minimally tall enough to push the footer to the bottom. This has the same disadvantage as 2 but in some ways is more elegant because the solution requires one style rule.

Hope this helps! Maybe with this knowledge you can put forward a PR for the potion yourself! ;) Cheers