5

我有一些非常基本的 HTML 和 CSS，我想要“粘页脚”效果。这是针对我公司内部的应用程序，因此我们只能强制使用最新的浏览器（IE11+）。看到IE9+支持CSScalc()动态属性，就用了。

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 错误？

4

2 回答 2

2

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

$(window).resize(function() { 
    /* The jquery calc code */
    $('#content').css('width', '100%').css('width', '-=100px');
});
于 2014-01-20T22:30:14.373 回答
1

我的建议是使用 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;
}
于 2014-01-20T22:40:55.710 回答