Check out our Angular Book Series.

How do I fix IE11 problems with CSS Calc and min-height?

I hate it when you have a problem that you cannot replicate in a simple example. That's exactly where I am. I'm working on an application built with HTML, CSS, and various JavaScript frameworks. The application requires a footer to be aligned at the bottom of the page. If the content is too large for the page, then the the footer should show up under the content. But, if the content is too small for the page, the footer should show up at the bottom of the window, or viewport.

This should be pretty simple to build using CSS and HTML:


<div class="wrapper">
Lots of Main Content and navigation and headers Here
</div>
<footer>
Some Footer Information Here that should always be at the bottom of the page
</footer>

The CSS would be something like this:


html, body {
height: 100vh;
margin : 0;
}

.wrapper {
min-height: calc(100% - 200px);
}

footer {
height : 200px;
background-color : blue;
}

The actual client project code is a lot more complex, but this gives you the gist. Play with the code here. Ignore my design skills.

The problem I was having was that IE11 seemed to have a problem with the min-height. When clicking in the page, or clicking a link to go to another page, it was as if the wrapper's min-height would shrink down on pages where the view height was greater than the actual content. This would cause the footer to jump to the middle of the page.

For the life of me, I haven't been able to create a simple sample to demonstrate this. Some part of the client's custom code seems to be causing this.

After some head banging and conferring with my team, I came up with this solution. It makes use of JavaScript and JQuery to 'hard code' the min-height on the wrapper. Instead of using the CSS Calc. this happens when the page loads and whenever the page is resized.


if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)){
function onResize(){
     /* The jquery calc code */
     $('.wrapper').css('min-height', '100%').css('min-height', '-=200px');
}

$(window).resize(function() {
onResize()
});

$(window).ready(function(){
onResize()
});

}

I used a regex trick to only execute the code for IE browsers. And I used this answer as a base for my solution.

Part of our problem solving this was my inability to create a simple reproducible case, but pouring over thousands of line of code I could not find the magic style combination that caused the 'footer jump' problem.

Frustrating; but the JS code above seems to solve the issue admirably.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.