0

If I have a HTML page like this:

<!DOCTYPE html>
<html>
  <body>
    ... some content or other ...
    <footer>... some footer text</footer>
  </body>
</html>

And I want the <footer> element to stick to the very bottom of the page (not the viewport, the page), even if there is not enough content to fill the page, and even if the height of the footer is unknown.

Solutions I am aware of but don't fulfill criteria:

  • position: fixed; bottom: 0; – this will stick to the bottom of the viewport, not the page
  • position: absolute; bottom: 0; – this will be at the bottom of the viewport, but will stay in the same place when the user scrolls
  • Wrapping the content in a container with min-height: 100% and then a margin the height of the footer – does not work with a footer of unknown height, plus requires additional mark-up to enable the style
  • CSS Flexbox – honestly this looks like the most promising but given even as of 2016 the browser support is patchy (support in IE is limited to IE11, and with problems).

So, any modern solutions? I retired from web design about 8 years ago and recently started again, it's mind-boggling to me how many of these basic tasks still seem to require brittle work-arounds based on fixed-size adjustments.

Lauren
  • 1,480
  • 1
  • 13
  • 36
  • Flexbox is the “modern” solution. And IE supports most of it (for such a footer thing you only need “basic” flexbox features anyway) from IE9 on, although using the older syntax. http://caniuse.com/#search=flexbox – CBroe Aug 11 '16 at 09:29
  • From the link you gave, IE9 does not support it at all, and I'm not sure how to achieve this using syntax IE10 understands. An example I found (https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css) is honestly baffling to me, when compared to the recent syntax. – Lauren Aug 11 '16 at 14:11
  • Sorry, yes, it is IE10. But considering that MS ended support for IE 8 up to and including 10 on most platforms beginning of this year, that should hardly matter. https://www.xfive.co/blog/stop-supporting-ie10-ie9-ie8/ The automatic fallback would be that in those browsers the footer just isn't at the bottom of the screen if the content is short. – CBroe Aug 11 '16 at 17:07

0 Answers0