关于min-height的IE6及以下浏览器的Hack

原文地址：http://hi.baidu.com/%C5%AC%C1%A6%B1%D8%D3%D0%CB%F9%B3%C9/blog/item/bed0b71ab5e723fdae51335d.html

 

刚刚做网站的时候遇到一个浏览器最小高度min-height 在IE6中不能自动伸展的问题，在网上找到了答案！

例如：

#container{

height:500px;

background:#00F;

}

#page{

min-height:500px;

background:#F00;

}

<div id="container">

<div id="page"></div>

</div>

page层内容少，页面很矮，加了min-height后FF与IE7.0中page层可以覆盖住container的背景色。而IE6及以下min-height无法辨认，所以露出了我不想让他露出来的container层的红色背景。

最简单的办法还是hack吧。

#page{

background:#F00;

min-height:500px;
height:auto !important;
height:500px;

}

这样IE6中page的确有了最小高度，能覆盖住container，但是其实也只有500px这么一个高度，等到内容多了这个page也不会自动拉长了，这样不行，折腾多时，终于找到个方法可以解决IE又有最小高度又能自动拉伸的目标：

#page{

background:#F00;

min-height:500px;
height:auto !important;
height:500px;

overflow:visible;

}

就是这句overflow:visible使IE们能够当作height:auto来处理。问题解决。