Css div adaptive height (compatible with ie, firefox, and ie8)

Let's take a look at an example:
Html:

The code 111cn.net is as follows:
<Ul>
<Li> </li>
<Li> </li>
</Ul>

Css:

The code 111cn.net is as follows:
Ul {
Margin: 0;
Padding: 10px;
List-style: none;
Background-color: #006699;
}
Ul li {
Width: 100px;
Height: 100px;
Float: left;
Margin-right: 10px;
Background-color: #99cc00;
}

Consistent effects in various browsers:

We can see that the height of ul outside the blue area is 0. If padding is not set, this ul cannot be seen. Of course, it is easy to stretch it. You only need to add a label behind the last li to clear the floating. In this case, the html structure is changed. Here we will discuss how to automatically extend ul without changing the structure.

Note: Auto-stretching is intended for elements containing floating elements (ul here ). Instead of floating element itself (li ).

Method 1:
Ie supports a css attribute zoom, which accepts a number or a percentage to indicate the scale-in (scale-out) ratio of the element. For example, zoom: 0.5 or zoom: 50% indicates that the image is halved, while zoom: 2 or zoom: 200% indicates that the image is doubled.
After this attribute is defined, it automatically adapts to the height in the ie browser. After this attribute is applied, ie will automatically expand. In general, we do not need to zoom in or out, so we can define zoom: 1. Current css:

The code 111cn.net is as follows:
Ul {
Margin: 0;
Padding: 10px;
List-style: none;
Background-color: #006699;
Zoom: 1;/* ie */
}

The ie browser does not support this attribute. Therefore, the first method should divide the browser into two camps: ie and non-ie.
A pseudo class is required for non-ie browsers: after (not supported by ie browsers ). The css code is as follows:

The code 111cn.net is as follows:
Ul: after {
Content :".";
Display: block;
Clear: both;
Height: 0;
}

: The after pseudo class is used to insert a piece of content to the end of an element, that is, the content attribute. Then clear the floating in the inserted content. We can imagine that a <span> is inserted after the last <li>. </span> The content is ". and then set the display: block; clear: both; height: 0; and other attributes (this metaphor is not necessarily accurate ).
Let's take a look at the effects below firefox:

We can see that ul has automatically extended, but there is a small black spot below. As you have guessed, the black spot corresponds to content :".".
This black spot must be removed. We can use font-size: 0; line-height: 0; to remove it.
Now, we have achieved our goal in the browsers of both camps. The following are all ul's css code:

The code 111cn.net is as follows:
Ul {
Margin: 0;
Padding: 10px;
List-style: none;
Background-color: #006699;
Zoom: 1;/* ie */
}
Ul: after {
Content :".";
Display: block;
Clear: both;
Height: 0;
Font-size: 0;
Line-height: 0;
}

Method 2
I just said that there are more than one method to solve the problem. Now let's talk about the second method. The second method is simpler. Similarly, the browser needs to be divided into two camps. However, unlike the previous one, this time ie7 stood in another camp. IE 7, firefox, opera, safari, etc ). For these browsers, you only need to define an overflow: auto;, but it does not work for ie6 and ie5 (called browser B. However, ie6 is easy to obey. You only need to define a height, even if it is 0, it will automatically stretch. Knowing this is useless. We have to differentiate the browsers in these two camps. How can this problem be distinguished?
Browser a supports Attribute Selection characters, whereas browser B does not.

Therefore, only browser a can execute the following code.

The code 111cn.net is as follows:
[Xmlns] ul {/* Simplified for html [xmlns] ul */
Overflow: auto;
}

Note that html must be available <! Doctype> header and

For browser B, you can use the following methods:

The code 111cn.net is as follows:
* Html ul {
Height: 1%;
}

In fact, height can be completely written as 0. Why do we need to write 1%? I don't know. Everyone writes this.

All right, the ul style code for the second method is as follows:

The code 111cn.net is as follows:
Ul {
Margin: 0;
Padding: 10px;
List-style: none;
Background-color: #006699;
}
[Xmlns] ul {/* Simplified for html [xmlns] ul */
Overflow: auto;
}
* Html ul {
Height: 1%;
}

Now there are two methods, so what is better? I personally prefer the second method. The reason is simple, with less code and standards. The scroll bar appears in rare cases, so use these two methods together.