IE11中CSS的min-height calc()动态属性是什么意思？

Question

我有一些基础的HTML和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 Fiddle | 完整屏幕演示

---

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

我做错了什么吗？还是这是IE的一个bug？

- FiniteLooper

Answer 1

这似乎是一个bug, 但如果你不怕使用jQuery，你可以用它来修复这个bug。

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

- AlexanderYW

---

我改为修改 min-height 而不是 width，这似乎正好符合我的要求。谢谢！ - FiniteLooper

Answer 2

我的建议是使用box-sizing。修改以下代码应该可以解决您的问题。这应该适用于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;
}

- asherstoppard

---

我已经在我的应用程序中使用了 box-sizing: border-box;，只是忘记在这个示例/演示中包含它。看起来它并没有起到任何帮助 :( - FiniteLooper

抱歉我有点傻，我在http://jsfiddle.net/asherstoppard/NK7sM/1/上创建了一个jsfiddle。我完全忘记给标题div应用绝对位置。这应该能解决你的问题。 - asherstoppard