Question

我正在尝试创建一个由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;
}

有人会有这样的跨浏览器解决方案吗？（至少主流较新的浏览器）谢谢！

-Thom

Answer 1

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

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

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

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

Answer 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）

其次，您需要指定<section>是块的IE8：

section {
    display: block;
}

这是一个有效的JsFiddle

min-height：100％无法在IE8中运行（可能还有其他版本）

2 个答案: