1 2 3 4 5 6 7 8 9 10 11 12 13 | <style type="css/text"> #container{ height:500px; background:#00F; } #page{ min-height:500px; background:#F00; } </style> <div id="container"> <div id="page"></div> </div> |
page层内容少,页面很矮,加了min-height后FF与IE7.0中page层可以覆盖住container的背景色。而IE6及以下min-height无法辨认,所以露出了我不想让他露出来的container层的红色背景。
最简单的办法还是hack:
1 2 3 4 5 6 | #page{ background:#F00; min-height:500px; height:auto !important; height:500px; } |
这样IE6中page的确有了最小高度,能覆盖住container,但是其实也只有500px这么一个高度,等到内容多了这个page也不会自动拉长了,这样不行,折腾多时,终于找到个方法可以解决IE又有最小高度又能自动拉伸的目标:
1 2 3 4 5 6 7 | #page{ background:#F00; min-height:500px; height:auto !important; height:500px; overflow:visible; } |
就是这句overflow:visible使IE们能够当作height:auto来处理。