ISSUE:
The CSS-only (flex) solution we're using for the sticky footer isn't behaving in IE 10&11 (Nb. sticky footer functionality is not provided for IE9 as it doesn't support flex)
SOLUTION:
The best solution we've found (considering our .wrapper block requirement) is to put the document in flex column mode, and use a viewport height setting (min-height: 100vh) to set up the .wrapper block (in turn providing the sticky footer functionality).
The previous solution with height: 100% on the wrapper affects our wrapper background colour for long content (as it snaps the wrapper panel to the viewport).
As this solution no longer requires a class on the <html> element (since we no longer require html, body { height: 100%; } viewport mode), we can drop the .template class down to the <body>. This should make it easier when implementing this in applications/CMSs where the <html> element is not reachable.
When testing this be sure to try with content longer and shorter than the viewport.
ISSUE: The CSS-only (flex) solution we're using for the sticky footer isn't behaving in IE 10&11 (Nb. sticky footer functionality is not provided for IE9 as it doesn't support flex)
The issue is IE's support of
min-height
with flex layout. This is well documented e.g. https://github.com/philipwalton/flexbugs#flexbug-3SOLUTION: The best solution we've found (considering our
.wrapper
block requirement) is to put the document in flex column mode, and use a viewport height setting (min-height: 100vh
) to set up the.wrapper
block (in turn providing the sticky footer functionality).The previous solution with
height: 100%
on the wrapper affects our wrapper background colour for long content (as it snaps the wrapper panel to the viewport).As this solution no longer requires a class on the
<html>
element (since we no longer requirehtml, body { height: 100%; }
viewport mode), we can drop the.template
class down to the<body>
. This should make it easier when implementing this in applications/CMSs where the<html>
element is not reachable.When testing this be sure to try with content longer and shorter than the viewport.