我正在尝试创建一个由 3 个部分组成的页面，每个部分的高度都是窗口/视口(viewport)的 100%。我找到了一种在 Chrome、Firefox(至少是较新版本)和 Safari 中工作的方法。它不起作用，但是在 IE8(可能还有其他版本)中。
这是测试页:http://dev.manifold.ws/test3/
这是 HTML:
<body>
<section id="section1">
</section>
<section id="section2">
</section>
<section id="section3">
</section>
</body>
这是 CSS:
#section1 {
min-height:100%;
position:relative;
background:#fc1b59;
}
#section2 {
min-height:100%;
position:relative;
background:#d5ea27;
}
#section3 {
min-height:100%;
position:relative;
background:#0048ff;
}
谁有跨浏览器的解决方案吗？ (至少主要的新浏览器) 谢谢!
-汤姆
最佳答案
您需要为 HTML5 添加 IE javascript shiv 并将所有 HTML5 元素声明为 BLOCK 元素。
http://code.google.com/p/html5shiv/
考虑使用这个重置 CSS 文件作为基础:
关于css - 最小高度 :100% not working in IE8 (and possibly other versions)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12145017/