CSS Height Adaptive

Object height:100% does not directly produce an effect because it is related to its parent object.

#center {
height:100%;
}

The CSS style above is not valid and does not produce any effect.

Need to rewrite:

html,body{
    margin:0px;
    height:100%;
}
#center {
width:200px;
height:100%;
Background-color: #666666;
border:1px solid red;
}

Set the #center object height:100%, and set the HTML and body of the height:100%, which is the height of the adaptive problem, whether an object's height can be used more than the display, depending on the object's parent class object, in the page, # Center is placed directly in the Body property, so its parent object is body, and in the default state, the browser does not give the body a height attribute, so we set the #centere to height:100% does not produce any effect, But after we set the body to 100%, the height:100% of his subclass object #center, which is a highly adaptive problem caused by browser parsing rules.

In addition to the code to give the body of the definition of properties, and also applied to the HTML object the same style definition, the advantage is to make IE and Firefox browser can be highly adaptive, IE and Firefox on the page parsing there is a certain difference, ie HTML object default is 100% The height of the body is not, and in Firefox HTML tag is not 100% height, so two tags are set to 100%, you can guarantee that two browsers will work properly.

CSS Height Adaptive