html - 为什么在这段代码中 Height : auto and Height: 100% on same element

标签 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 将根据其子元素和 ! important 会强制浏览器使用这种风格。那么在这种情况下 height: 100% 就会生效。

我正在使用这段代码来测试一些东西。我用 height: auto !important; 写了两个 fiddle ,另一个没有这个代码。这是我的 JsFiddle1JsFiddle2 那些 fiddle 是不言自明的。我只是不明白为什么会这样

最佳答案

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

关于html - 为什么在这段代码中 Height : auto and Height: 100% on same element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19600624/

相关文章:

android - 移动浏览器上的整页 iframe

html - CSS 高度 100% 在 TD 上不起作用

jquery - Twitter Bootstrap 主题滚轮

html - Bootstrap 3 : Custom Navbar Toggle Issue

css - 谷歌浏览器错误地显示 bootstrap .thumbnail 图像溢出容器

javascript - 希望用 HTML/JS 表示带有输入字段的分数模板

html - 构建小部件 (HTML/CSS)——表格还是 div?

css - Bootstrap 4 : Cards: How do I make horizontal repeating cards in three columns

javascript - 失去 HTML 表中文本字段的焦点以启动 JQuery 计算

html - 将许多相同大小的 div 与 bootstrap yii2 对齐