Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to achieve DIV automatic adaptation height in IE7, IE8 and Firefox, and the content quality of the article is high, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

DIV+CSS realizes automatic height adaptation of DIV in IE7, IE8 and Firefox

Set under IE7 and Firefox

The container with a fixed height in a standard browser will not be stretched as it is in IE6, so I want to fix the height and how do I want to be able to be stretched? The way to do this is to remove the height and set the min-height:200px;. In order to take care of the IE6 that does not know min-height, you can define it as follows:

{heightVub autoweight; height:200px; min-height:200px;}

Set under IE8

◆ extra label method

This approach is to insert an extra tag into the end of the parent container and make it clear the clear to expand the parent container. This approach has good browser compatibility and has no problem, but the drawback is that it requires additional (and often non-semantic) tags. Personally, I don't like this method, but it is indeed recommended by the W3C:

one

Or use the

one

◆ uses after pseudo-classes

This approach is to use after pseudo-classes and content declarations on the parent container to add new content to the end of the specified current content. It is often done to add a "dot" because it is small and unnoticeable. Then we use it to clear the float (close the floating element) and hide the content.

This method is generally compatible, but after a variety of hack can also cope with different browsers, while ensuring that the html is relatively clean, so it is still used more.

1#outer:after {2content: "."; 3Hight Vista 0; 4VisibilityVidden; 5DisplayRod; 6clearRod; 7}

Set overflow to hidden or auto {IE8 common internal floating external height does not adapt to the solution}

This is done by setting the overflow of the parent container to hidden or auot to close floating elements in standards-compliant browsers. However, when using overflow, it may have an impact on page performance, and the impact is uncertain, you can test your page on multiple browsers.

◆ floating external element, float-in-float

This is done by letting the parent container float, which takes advantage of a feature of the floating element; the floating element closes the floating element. This method works well in both IE/Win and standards-compatible browsers, but the disadvantages are obvious; the parent container may not want to float, after all, floating is a special behavior, and sometimes the layout does not allow it to float.

About IE7, IE8, Firefox in how to achieve DIV automatic adaptation height to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.