3

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

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

-汤姆

4

2 回答 2

3

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

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

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

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

于 2012-08-27T15:39:46.157 回答
0

首先，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]-->

（来源）

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

section {
    display: block;
}

这是一个有效的JsFiddle

于 2012-08-27T15:41:11.400 回答