min-height:100% 在 IE8（可能还有其他版本）中不起作用答案

【问题标题】：min-height:100% not working in IE8 (and possibly other versions)min-height:100% 在 IE8（可能还有其他版本）中不起作用
【发布时间】：2014-01-15 09:56:44
【问题描述】：

我正在尝试创建一个由 3 个部分组成的页面，每个部分的高度为窗口/视口的 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;
}

有人对此有跨浏览器的解决方案吗？（至少是主要的较新浏览器）谢谢！

-汤姆

【问题讨论】：

只是一个友好的建议：您尚未接受关于 SO 的单一答案，第一个答案已经超过 6 个月大。在提出更多问题之前，请考虑通过标记一些答案来承认其他人提供的帮助。如果其他人知道你会奖励他们，你会得到更好的帮助/反馈。
如果你暂时把<section>s改成<div>s怎么办？要在旧版 IE 中使用 HTML5 元素（几乎完美），您必须使用 code.google.com/p/html5shiv 或 modernizr.com
嗨，KP，你说得对。我没有意识到我应该点击复选标记来接受答案。我刚刚接受了以前的答案。我非常感谢我得到的所有帮助。无论如何，感谢您指出这一点。
嗨，biziclop，看起来将
更改为
成功了！谢谢！

标签： css cross-browser

【解决方案1】：

您需要为 HTML5 添加 IE javascript shiv 并将所有 HTML5 元素声明为 BLOCK 元素。

http://code.google.com/p/html5shiv/

考虑使用此重置 CSS 文件作为基础：

http://meyerweb.com/eric/tools/css/reset/

【讨论】：

嗨，Billy Moat，我相信您的解决方案也能正常工作，但我最终只是按照@biziclop 的建议将
更改为
并且它成功了。如果我以后想使用 HTML5，我会记住你的解决方案。谢谢！
嗨，只要你明白发生了什么？ SECTION 是一个新的 HTML5 元素，除非您告诉它，否则它不会在旧浏览器中显示为块级元素。这与 otjer 新的 TML5 elmenets 相同，例如页脚、页眉、文章、导航、旁边图等 :)
除此之外，您可能还想对 IE 使用 min-height hack。谷歌“最小高度快速破解”（来自达斯汀迪亚兹），它工作得很好。

【解决方案2】：

首先，IE8不知道<section>（HTML5）标签，你需要添加一些JS：

<!--[if lt IE 9]>
   <script>
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   </script>
<![endif]-->

(source)

其次，你需要在IE8中指定<section>是一个block：

section {
    display: block;
}

这是一个有效的JsFiddle

【讨论】：