A tutorial on the use of "min-height in CSS" in school

Minimum height min-height can set the minimum height of a box, when its content is less, can also keep box height is certain, beyond the automatic downward extension, but so far only opera and Mozilla support, IE7 above version support, how on the existing basis (IE6 80-90%), reasonable, magical to the minimum height?

Assuming there are two box (Box1 and Box2), we set a minimum height of 150PX.

The following is a reference to a CSS fragment:

div.box1,div.box2{width:300px min-height:150px;background: #EEE; float:left;margin-right:20px;}

The following are references to HTML source snippets:

<div class= "Box1" >ie6 did not maintain a minimum height of 150px</div>
<div class= "Box2" > all IE support to maintain minimum height of 150px</div>

The current effect, IE6 and part of the IE7 version did not maintain a minimum height of 150px.

Way to solve

Provides CSS hack to set IE6 height

The following is a reference to a CSS fragment:

div.box1,div.box2{width:300px min-height:150px;background: #EEE; float:left; margin-right:20px;}
Div.box2{*height:auto!important;*height:150px; min-height:150px;}

The above is explained by the following Box2 settings:

*height:auto!important;*height:150px to differentiate Ie6,ie7 and other browsers to achieve a minimum level of compatibility-you might want to understand the difference between CSS hack different browsers.

Through the above div+css examples I hope you can understand each browser support minimum height (min-height:) method, here uses the CSS hack method to distinguish IE6 and partial IE7 does not support Min-height method.