Turn, dynamically generated highly adaptive

In IE, height self-adaptation is very easy, but in FF, if the DIV layer contains layers rather than directly filling the content, it will not automatically adapt to the height, this is often used when we set the background layer. The following is an example:

<Div id = "Container">
<Div id = "Main"/> </div>
<Div id = "sidebar"/> </div>
</Div>

As the outermost layer, container can be adaptive in IE, but only the main and sidebar layers can be used in ff. After a long time, I also asked many friends and finally found the answer from the Internet, simple:

Just define # container {
Display: Table}. The principle is the same as the previous table layout.

But this problem seems to cause a float layer error... If there is a better solution

You can leave a message.

Today, we have created another solution.

<Div id = "Container">
<Div id = "Main"/> </div>
<Div id = "sidebar"/> </div>
</Div>

The above sectionCode. Let's set the container height to 100%.
Height of main and sidebar: 100%.

In this wayFirefoxThe test passed in IE, which is better than the display: Table; method. Display: Table; may cause some layout errors.

We recommend that you use this height: 100%;

The general principle is that when the height of the Child-level Div increases, the height of the parent-level Div cannot be changed because the height of the parent-level div is not set. Therefore, we set the parent-level Div

The DIV height is 100%, but an error occurs if the height of the sub-Div is not set. Therefore, we specify the parent-level Div and sub-level Div as 100% at the same time.