CSS layout-highly adaptive

What is highly adaptive?

Highly adaptive means that the height can change with the size of the browser window. The height of a typical application is fixed in the top column of some background interfaces and used as the menu bar or navigation bar, the following column is highly adaptive for displaying content. Height self-adaptation is not as simple as width self-adaptation, and it is slightly more complicated in compatibility with browsers.

Layout

In IE7 +, chrome, firefox, and other browsers, highly adaptive solutions can be implemented using absolute positioning. However, when an element is absolutely positioned, if the height or width is not set for it, its height and width are determined by its top, right, bottom, and left attributes, however, this rule is not applicable in IE6, so we have to find another way in IE6. In IE6, setting padding for html does not support the size of html elements, which is exactly what we want to use.

Solutions in IE7 + and W3C browsers

Check the Code:

Let's look at the effect:

Solutions in IE6

Okay, I don't want to talk about IE6 any more, but I just want to fix it as soon as possible.

In IE6, the idea is to set the height of the html and body elements to 100%, that is, the height of the browser window, and then use padding-top to squeeze out some space on the html elements, because the highest reference object for absolute positioning refers to the html element, you can absolutely locate the top column in the space of the html padding-top. At this time, the body height is the html height (also the browser window height) minus the html padding-top value, which is also a strange feature of ie6, because according to the w3c box model, when the padding-top of the html element is added, the height of the html element is also increased. In this case, a vertical scroll bar appears in the browser window. However, IE6 does not. After adding padding-top to html, the height of the entire html element remains unchanged, that is, the height of the browser window. What changes is that the height of the body is reduced, used to offset the html padding-top.

Let's take a look at the code first:

Let's look at the effect:

Final compatible code

<! DOCTYPE html> 

:
Non-ie6
 
Ie6
 
Promotion
This method also applies to the three-column layout with fixed top and bottom column height and self-adaptive middle column height.