IE8 身体没有占据 100% 的高度答案

【问题标题】：IE8 Body not taking 100% heightIE8 身体没有占据 100% 的高度
【发布时间】：2012-04-20 21:28:51
【问题描述】：

在我的应用程序中，我无法在 IE8 中完全覆盖浏览器窗口的一页。

HTML：

<body class="body">
    <div class="wrapper">
        <div class="main-holder">
            <form id="Form1" runat="server">

            </form>
        </div>
    </div>
</body>

还有 CSS：

.body {
    background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    -pie-background: linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    behavior: url(PIE.htc);
    height: 100%;
}
.main-holder {
    width: 1000px;
    min-height: 600px;
    margin: 10px auto;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 10px;
    -moz-box-shadow: 10px 10px 10px #000;
    -webkit-box-shadow: 10px 10px 10px #000;
    box-shadow: 10px 10px 10px #000;
    background: -webkit-gradient(linear, left bottom, left top, from(#F8AC25), color-stop(0.05, #FFF999), color-stop(0.5, #F8AC25), color-stop(0.95, #FFF999), to(#F8AC25));
    background: -webkit-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    background: -moz-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    background: -ms-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    background: -o-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    background: linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    -pie-background: linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    behavior: url(PIE.htc);
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial Sans-Serif;
}

但在 IE8 中，页面顶部和底部有两条白色条带。出于这个原因，body 并没有完全覆盖页面，但在 Firefox 中确实如此。

IE8 截图：

火狐浏览器截图：

在 IE8 中，它们是围绕 wrapper 的偏移量：

任何信息都会对我很有帮助。

谢谢。

【问题讨论】：

如果我没记错的话，IE 需要 100% 应用于 <html> 和 <body> 标签才能工作。
@Andreas Hagen 谢谢。你是说我应该添加 html body{height: 100%;} 吗？
记住逗号 :) html, body {height: 100%;}
@Andreas Hagen 谢谢。我按照你说的做了，然后底部的条带消失了，但顶部仍然有一条条带。我添加了另一张图片，上面说wrapper 设置了偏移量 10。
这可能是html或body的边距。我会将其发布在答案中。

标签： html internet-explorer-8 height document-body

【解决方案1】：

您的 100% 高度需要同时应用于 HTML 和 BODY 标签：

html, body { height: 100%; }

Here's some more information!

【讨论】：

感谢您的回复。使用后，底部条带消失了，但仍然有顶部条带。您可以在最后一张图片中看到将偏移量 10 设置为 wrapper

【解决方案2】：

问题可能是由于 html 或 body 元素。试试这个：

html, body {
padding: 0;
margin: 0;
height: 100%;
}

请注意，将高度设置为 100% 可能会在网站流出画布以显示滚动条时给您带来问题。然后高度仍将是 100%，并且可能会导致内容溢出问题。

【讨论】：

我已经设置了 html, body { height:100%;字体系列：Arial Sans-Serif；边距：0；填充：0； }，但问题依然存在。
是的，我看到了另外一个可能导致它的原因：.main-holder 使用 margin: 10px 推送，这也可能会推送到 body，在 body 中使用 padding: 10px 0 来实现效果
谢谢它的工作。但是正如您提到的，它们可能是溢出内容的问题，当我调整浏览器大小时，它发生了。我添加了另一张图片。有转机的方法吗？非常感谢您的帮助。
overflow: scroll 如果幸运的话可能会救你，但你通常应该避免设置这样的静态高度。如果您不担心向后兼容性，我建议您使用 min-height 作为 body 来避免它。
非常感谢。所以解决方案是：html, body {height:100%;} body{min-height: 810px;/* 因为main-holder的最小高度是800px + 10px*/}。有效。 :)

【解决方案3】：

试试这个

body
{
    overflow: scroll;
}

【讨论】：