After much troubleshooting, I finally found the solution to my problem. The main issue was the use of height:100vh; in the .wrapper CSS class. I discovered that IE10/IE11 and Edge each handle this property differently. While it caused no issues in FF, Chrome, or Opera (I can't confirm for Safari), I had to adjust my code based on browser and page height.
The Issue with IE10/IE11:
In IE10/IE11, the problem is two-fold:
If height:100vh; is set in .wrapper, pages shorter than the viewport display correctly, with the footer at the bottom. However, removing this property causes the footer to hang mid-page on such pages.
Conversely, for pages taller than the viewport, the header remains fixed at the bottom upon loading but then sticks as the user scrolls. Removing height:100vh; from .wrapper allows the footer to be pushed down as intended.
Therefore, smaller pages benefit from height:100vh;, while larger ones do not need it.
Solutions for IE10/IE11:
Solution 1: Apply height:100vh; to pages shorter than the viewport height using media queries:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.wrapper {
height: 100vh;
}
}
This method works but might not be ideal.
Solution 2: Use JavaScript to determine when to include height:100vh; dynamically.
The following JavaScript addresses the IE10/IE11 situation:
function setHeightIETenEleven()
{
var isIE10 = false;
var isIE11 = false;
/* Check for IE10 */
/*@cc_on
if (/^10/.test(@_jscript_version)) {
isIE10 = true;
}
@*/
/* If not IE10, check for IE11 */
if(!isIE10) {
var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
}
if(isIE10 || isIE11) {
var actualHeight = document.body.scrollHeight;
var clientHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
if(actualHeight == clientHeight)
insertCss(".wrapper {height: 100vh;}");
}
}
function insertCss( code ) {
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) { // For IE
style.styleSheet.cssText = code;
} else { // For other browsers
style.innerHTML = code;
}
document.getElementsByTagName("head")[0].appendChild( style );
}
window.onload = setHeightIETenEleven;
I must credit the insertCss() function source: How do you add CSS with Javascript?
Given its dynamic nature, this approach is preferred.
The Edge Situation:
Edge initially presented similar issues to IE10/IE11, but removing the height property resolved them immediately, regardless of page height. To ensure compatibility with Edge, use the following:
@supports (-ms-ime-align: auto) {
.wrapper {
height: unset;
}
}
For all other browsers, utilize:
@supports not (-ms-high-contrast: none) {
.wrapper {
height: 100vh;
}
}
More complex than expected, but it gets the job done...