CSS min-height calc() динамическое свойство в IE11

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?

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/.

Я также рекомендовал бы использовать классы, так как идентификаторы должны быть уникальными для каждого элемента.

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