CSS website layout Div highly adaptive-Discussion

Many Web designers have encountered highly adaptive problems when they first came into contact with W3C standards. Because the height of objects such as Div: 100%; does not directly produce actual results, I began to doubt whether the browser supports the compiling method of Height: 100%? Of course not. The most obvious example is that table height = "100" has no problem. This is a very troublesome problem. I have browsed many websites, including www.w3cn.org. Some solutions are to constantly modify the fixed value of height, or use the same page background and Div background to spoof the viewer's vision, but they have not fundamentally solved the problem. Today, we finally found the most perfect solution from the CSS website layout recording. Let's take a look at this highly adaptive CSS code: HTML, body {
Margin: 0px;
Height: 100%;
}
# Left {
Background-color: # CCC;
Width: 300px;
Height: 100%;
Float: left;
}

The code is no longer simple. The height: 100% is set for the # Left object. However, we can also see that the height of HTML and body is set to 100% ;, this is the key to the highly adaptive problem.

Analysis:
Whether the height of an object can be displayed as a percentage depends on the parent object of the object. # Left directly rotates in the body on the page, so its parent level is body, by default, the browser does not give the body a height attribute. Therefore, when we directly set # left to height: 100%;, no effect will be produced, when we set 100% for the body, its child object # Height: 100% for left will take effect, which is a highly adaptive problem caused by browser parsing rules. In addition to the body application, the Code also applies the same style design to HTML objects. The advantage of this is that both IE and Firefox can be highly adaptive, but the body is not. In addition, the HTML Tag in Firefox is not 100% in height, so the two tags are defined as height: 100%, to ensure that both browsers can be properly displayed.