CSS min-height calc() dynamic property in IE11

Question

I have some very basic HTML & CSS, and I'd like to have the "sticky footer" effect. This is for an application internal to my company, so we can enforce latest browsers only (IE11+). I saw that IE9+ supports the CSS calc() dynamic property, so I put it to use.

HTML

<div id="wrap">
    <h1 id="title">The Title</h1>
    <div id="content">
        <p>Stuff....</p>
    </div>
</div>

CSS

html,
body,
#wrap{
    height: 100%;
}
#title{
    height: 60px;
}
#content{
    min-height: 100%; /*fallback*/
    min-height: calc(100% - 60px); /*the title is 60px tall*/
}

---

JS Fiddle | Full Screen demo

---

This works great in Chrome and Firefox, but IE11 (the only version I care about) will not re-calculate this value when the window is resized. Sometimes it also seems to unnecessarily extend past the end of the page, thus causing scroll when it's not needed.

And I doing something wrong here, or is this an IE bug?

Answer 1

It seems like a bug, but if you too aren't afraid of jquery you can fix the bug with it

$(window).resize(function() { 
    /* The jquery calc code */
    $('#content').css('width', '100%').css('width', '-=100px');
});