IE11 中的 CSS min-height calc() 动态属性

Question

我有一些非常基本的 HTML 和 CSS，我想要“粘性页脚”效果。这是我公司内部的应用程序，因此我们只能强制执行最新的浏览器 (IE11+)。我看到了 IE9+ supports the CSS calc() dynamic property , 所以我把它用起来了。

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

---

这在 Chrome 和 Firefox 中效果很好，但 IE11(我唯一关心的版本)不会在调整窗口大小时重新计算此值。有时它似乎也不必要地超出页面末尾，从而在不需要时导致滚动。

我在这里做错了什么，或者这是一个 IE 错误？

Answer 1

这似乎是一个错误，但如果你也不害怕 jquery，你可以用它修复错误

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