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');
}); 

Answer 2

My recommendation would be to use box-sizing. Altering the following code should sort your issue. This should accomodate 91% of users including most IE11, IE10, IE9, IE8 and IE7 (If Required) users - http://caniuse.com/#search=box-sizing.

I would also recommend the use of classes as ID's should be unique to each element.

CSS

*,
*:after,
*:before {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
html,
body,
.wrap{
    height: 100%;
}
.title{
    height: 60px;
}
.content{
    min-height: 100%; /*fallback*/
    padding-top:60px;
}