为什么在这段代码中高度:自动和高度:相同元素的100%

时间:2013-10-25 22:54:57

标签: html css twitter-bootstrap twitter-bootstrap-3

我正在阅读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;
}

我不明白为什么他们多次定义包裹高度。据我所知,auto将根据其子元素计算高度!重要的是会强制浏览器使用这种风格。然后在这种情况下高度:100%将生效。

我正在使用此代码来测试一些事情。我用height: auto !important;写了两个小提琴,没​​有这个代码。这是我的JsFiddle1JsFiddle2 那些小提琴是不言自明的。我只是不明白为什么会这样发生

1 个答案:

答案 0 :(得分:1)

某些较旧的浏览器(如IE6)忽略!important标志。因此,在IE6上,将遵守第二个height。这只是针对旧浏览器的一种方式。