Testing IE7 100% min-height

This is the code that should give the browser a min-height of 100% in IE6 and under and also in browsers that understand min-height like IE7 and firefox.

html,body{height:100%}
#outer{
height:100%;
min-height:100%;
background:red;
}
html>body #outer{height:auto}/* not ie6- */

Make sure your browsers window is minimised to about half the monitor size then click refesh.

You should see that the page is covered in 100% red background. Now grab the bottom of the browser window and pull the window downwards to make it bigger.

In IE7 the red background doesn't follow the window down but stays at the initial height.

It seems as though the re-definition of height is causing a different display behaviour for some reason. If the height auto is added at the end of the original block then this problem doesn't occur it only happens when the height is redefined in a new styles block.

The solution is to redefine min-height again in the second style.

e.g. html>body #outer{height:auto; min-height:100%;}

Another bug squashed