Div + CSS minimum height (compatible with IE6 \ IE7 \ ff)

After a long morning of tossing, the problem of Min-height is not fixed, because Min-Height: only plays a role in IE7 \ ff. The Internet Explorer 6 does not recognize it. The minimum height must be used for this page.

The page is left and right of the two columns. The left column is a fixed navigation menu with a length of about 1160px. The right side is the detailed information of the product, which is dynamic and can be long or short.

There is a 1px gray separator line in the middle of the left and right columns, that is, whether the split line is located on the right border of the Left bar or on the left border of the right bar. This is a headache. Because the left side is set to 1160px, and the right side is scaled freely. If it is set on the left column, the line will not be extended when the dynamic content length in the right column is greater than 1160. Well, it should be on the right column, but if the dynamic content in the right column is smaller than 1160 in the left column, this line will not automatically stretch until 1160. It's really difficult.

Now only the minimum height can solve this problem. Set a minimum height Min-Height: 1160px in the right column. Even if the dynamic content in the right column cannot reach the length of 1160, with this minimum height, the right column will always be displayed at the minimum height of 1160. When the dynamic content is greater than 1160, it can also be automatically extended. This step can also be used to solve the problem.

 

However, the headache is that IE6 does not recognize Min-Height:, so there is no problem in IE7 \ FF testing. But now we want to solve IE6. Fortunately, IE6 is different from IE7. It can set the dead height of a module. When the content in the template is greater than this height, this module will be automatically opened. If IE7 is set to dead height, when the content is greater than the height, it is overwritten, that is, it is not displayed.

Use this. We can set it in the Code as follows:

. Left {float: Left; width: 200px ;}

 

. Right {

Float: right;

Width: 600px;

Border-left: 1px solid # CCC;

Min-Height: 1116px; // IE7 \ FF

Height: 100%; // IE6 \ IE7 \ FF is very important. After the height of IE6 is fixed, you need to add this item to automatically extend it.

_ Height: 1116px; // IE6

}

 

In this way, the problem is solved.