Fix sticky footer functionality in IE
Closed this issue · 1 comments
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-3
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.
fixed by WestpacCXTeam/GUI-templates@2b4bf7ce00082da36bf8dc09b088c59bd5f515f6