我有一些非常基本的
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*/
}
这在Chrome和Firefox中效果很好,但IE11(我唯一关心的版本)在调整窗口大小时不会重新计算此值.有时它似乎也不必要地延伸到页面的末尾,因此在不需要时会导致滚动.
而我在这里做错了,或者这是一个IE错误？
解决方法
这似乎是一个错误,但如果你也不害怕jquery你可以修复它的bug
$(window).resize(function() {
/* The jquery calc code */
$('#content').css('width','100%').css('width','-=100px');
});
