search

WestpacCXTeam / GUI-source

Westpac GUI source code
http://WestpacCXTeam.github.io/GUI-source
GNU General Public License v2.0
37 stars 19 forks source link

Fix sticky footer functionality in IE #423

Closed jonnystening closed 6 years ago

jonnystening commented 6 years ago

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.

jonnystening commented 6 years ago

fixed by WestpacCXTeam/GUI-templates@2b4bf7ce00082da36bf8dc09b088c59bd5f515f6