html - 为什么在此代码中高度：自动和高度：同一元素上的 100%

Question

我正在阅读 Bootsrap3 文档。我发现这段页脚代码粘在屏幕底部。

html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important; /* line no 1 */
height: 100%;            /* line no 2 */
margin: 0 auto -60px;
padding: 0 0 60px;
}
footer {
height: 60px;
background-color: #f5f5f5;
}

我不明白他们为什么多次定义包装高度。据我所知，自动将根据其子元素计算高度，并且！important 将强制浏览器使用这种样式。那么在这种情况下 height: 100% 将生效。

我正在使用这段代码来测试一些东西。我写了两个小提琴，一个height: auto !important;没有这个代码。这是我的JsFiddle1和JsFiddle2 那些小提琴是不言自明的。我只是不明白为什么会这样

Answer 1

一些较旧的浏览器，如 IE6，忽略该!important标志。因此在 IE6height 上将遵循第二个。这只是针对旧浏览器的一种方式。