IE8 body does not accept 100% height
In my application, I am having a problem to completely cover the browser window page in IE8.
HTML:
<body class="body">
<div class="wrapper">
<div class="main-holder">
<form id="Form1" runat="server">
</form>
</div>
</div>
</body>
And the 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;
}
But in IE8, there are two white bars at the top and bottom of the page. And for this reason, the body does not completely cover the page, but Firefox does.
Screenshot of IE8:
Screenshot of Firefox:
In IE8, this is the offset around the wrapper:
Any information will be very helpful to me.
Thank.
+3
source to share
3 answers
The problem is probably with the html or body element. Try the following:
html, body {
padding: 0;
margin: 0;
height: 100%;
}
Remember that setting heights up to 100% will probably give you problems when the site goes out of the canvas for the scrollbars to appear. The height will still be 100% and will likely cause overflowing content issues.
+7
source to share