IE11中的CSS Min-Height Calc()动态属性

Question

我有一些非常基本的html＆amp;CSS，我想拥有"粘性页脚"影响。这是针对我公司内部的应用程序，因此我们只能执行最新的浏览器（IE11 ）。我看到IE9 支持CSS calc()动态属性，因此我使用它。

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小提琴|全屏演示

---

这在Chrome和Firefox中效果很好，但是IE11（我关心的唯一版本）在调整窗口大小时不会重新计算此值。有时，它似乎也不必要地延伸了页面末端，因此在不需要时会导致滚动。

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

Answer 1

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

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

Answer 2

我的建议是使用盒子大小。更改以下代码应整理您的问题。这应该适应91％的用户，包括大多数IE11，IE10，IE9，IE8和IE7（如果需要）用户-http：//caniuse.com/#search=box-sizing。

我也建议使用类的使用，因为ID应该是每个元素唯一的。

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