Tips for using DIV container fixed height in IE6 and IE7

There are many differences between IE6 and IE7 in their interpretation of CSS. Today we will talk about one of them: height.
example:

Copy code

The code is as follows:

Under IE6: If the content height in the DIV does not exceed 50px, the height of the DIV is 50px. If it exceeds the set value, the height will expand with the content, which is usually called adaptive height.
Under IE7: If the height of the content in the DIV does not exceed 50px, the height of the DIV is 50px. If it exceeds the set value, the height of the DIV will still be fixed at 50px, and the excess content will exceed the DIV and overflow. If there is other content under the DIV, it will overlap with the overflowing content.

This is obviously a very important point, if not handled it will cause page disorder. There are usually two ways to solve this problem:

1. Focus on height: fix the height of DIV to 50px, hide the extra content, and write the CSS for both browsers as follows:

Copy code

The code is as follows:

overflow:hidden is very important, compatibility depends on it

2. Content-oriented: Set the minimum DIV height to 50px. When there is too much content, the DIV height will adapt to the content. At this time, CSS HACK is needed to do some compatibility processing:
<div style="min-height:50px;_height:50px;">, min-height:50px minimum height, this IE7 and FF can recognize, _height:50px is underlined for the purpose of only allowing IE6 to recognize it.

<<: Use CSS to achieve three-column adaptive layout (fixed width on both sides, adaptive in the middle)

>>: The latest Linux installation process of tomcat8