IE8 Height 100% Bug

Question

Has anyone heard of a bug that occurs with IE8 when applying height as a percentage to the html and body using CSS? I'm seeing a white background when a tile pattern should be applied.

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

body {
    background-color: #666;
    background-image: url('../images/body/bg_pattern.gif');
}

Answer 1

IE8 interprets the height element closer to the standards than IE7 did. The statement

`Height: 100%

Is pretty much ignored. Percentage heights are based upon the height of their parent element. If the parent element doesn't have an explicit height, the percentage is ignored and set to Auto. You can see more about this on w3.org.

If the page you are displaying is empty, body will have a height of 0 and you will see the default background.

Answer 2

To prevent the generated height:0 when you're floating the child elements, set

overflow:hidden;
position: relative;

on the parent.