Home > Developer > Web Develop
You will encounter this problem when you first try to be highly adaptive:
The heith:100% of the object; does not directly produce actual results
Why is it?
There is no effect, and the browser's parsing method has a certain relationship, look at the following code
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>A list of layouts</title> <style>html, Body{margin:0;padding:0;width:100%;Height:100%; }/*Here's the key .*/#layout{Background-color:#cccccc; /*border:2px solid #333333;*/margin:0 Auto;width:80%;Height:100%; } </style> </Head> <Body> <DivID= "Layout"></Div> </Body></HTML>
Whether the height of an object can be displayed as a percentage depends on the object's parent object. In the page, the #layout is placed directly in the body, so its parent object
Is the body, in the default state, the browser does not give Bodyy a height attribute, so we set the #layout to height:100%, and will not have any effect. but
Once we have set the body to 100%, its child object #layout the height:100%; it's going to work, which is the highly adaptive browser parsing rule.
Problem.
In addition to the code to define the body 100%, but also to the HTML object to apply the style definition to vomit, the advantage is that using IE and Firefox browser can be implemented
Highly adaptive, IE and Firefox there are some differences in the parsing of page objects. In IE, the HTML object defaults to a height of 100%, while the body is not. In Firefox,
HTML tags are not 100%-height, so we define two tags as height:100%, which ensures that two browsers work properly.
Note: Float element blank edges do not stack
CSS height adaptive height:100%;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
