logo标签列表

IE8页面高度无法达到100%

htmlinternet-explorer-8heightdocument-body
3

在我的应用程序中，我遇到了一个问题，在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截图如下： enter image description here Firefox截图如下： enter image description here 在IE8中，wrapper周围有一个偏移量： enter image description here 任何信息对我都会非常有帮助，谢谢。 enter image description here
3
如果我没记错的话，这个需要将100%应用到“<html>”和“<body>”标签才能生效。 - Andreas Hagen
@Andreas Hagen 谢谢。你是说我应该添加 html body{height: 100%;} 吗？ - Tapas Bose
1
请记得逗号：html，body {height: 100％;} - Andreas Hagen
@Andreas Hagen 谢谢。我按照您说的做了，底部条消失了，但是顶部仍然有一条条纹。我添加了另一张图片，上面写着wrapper设置了一个偏移量10。 - Tapas Bose
那可能是来自html或body的边距。我会在答案中发布它。 - Andreas Hagen
3个回答
7
问题可能是由于html或body元素引起的。请尝试以下方法：
html, body {
padding: 0;
margin: 0;
height: 100%;
}

请注意，将高度设置为100％可能会在网站超出画布范围并出现滚动条时给您带来问题。然后，高度仍将是100％，并可能导致溢出内容出现问题。

我已经设置了html，body { height:100%; font-family: Arial Sans-Serif; margin: 0; padding: 0; }，但问题仍然存在。 - Tapas Bose
是的，我看到另一个可能会导致这种情况的问题：.main-holder 使用 margin: 10px 进行推动，这可能会对 body 产生影响。相反，应在 body 中使用 padding: 10px 0 来实现效果。 - Andreas Hagen
谢谢，它有效了。但正如你所提到的，可能会出现溢出内容的问题，当我调整浏览器大小时确实发生了。我已经添加了另一张图片。有没有什么解决方法？非常感谢你的帮助。 - Tapas Bose
overflow: scroll 可能会帮助你解决问题，但通常应避免设置静态高度。如果您不关心向后兼容性，建议使用 min-height 来避免此问题。 - Andreas Hagen
非常感谢。所以解决方案是：html，body {height:100％;} body {min-height: 810px; / *因为main-holder的最小高度为800px + 10px * /}。它奏效了。 :) - Tapas Bose
设置最小高度不能解决溢出问题。我使用JavaScript来解决这个问题。$(document).ready(function () {
setInterval(adjustBodyHeight, 100); }); var adjustBodyHeight = function () { var wrapperHeight = $('.wrapper').height(); $('.body').height(wrapperHeight + 10 + "px"); } - Tapas Bose
2

你需要将100%的高度应用到HTML和BODY标签上：

html, body { height: 100%; }

这里有更多信息！

这是一个关于使用CSS实现100%高度布局的文章。
谢谢回复。使用这个后，底部条已经消失了，但是仍有一个顶部条。您可以在最后一张图片中看到wrapper设置了一个偏移量为10。 - Tapas Bose
1
尝试这个。
body
{
    overflow: scroll;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接