Home > Developer > Web Develop
In some more formal sites often see the height of the HTML and body will be set. is for the right display of the back div height.
Div 100% is from its upper-level div of the wide-high inheritance, it is very important to set the div100% display, you must set its upper div width or height, otherwise invalid.
There must be a container in front to show how high he is. In this way, the div can inherit the height of the upper level by 100%. Unfortunately, the browser is generally interpreted as the height of the content instead of the 100%.
Workaround:
As long as the HTML and body set height of 100% can be html,body{height:100%;} In this way, the div inherits the height of the upper level proportionally. The height property of the div element you just set seems to have little effect.
In addition, you ask "html{height:100% " What is the meaning of it, is the height relative to the browser? "Indeed, the height:100% here is relative to the height of the browser . Browser height is not the height of the page!
--------------------Example 1: (Set the height for Div only, page height 30% is invalid)--------------------<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> </Head> <Body> <DivID=""style= "border:1px solid green;height:30%;">Div1</Div> <DivID=""style= "border:1px solid green;height:30%;">Div2</Div> <DivID=""style= "border:1px solid green;height:30%;">Div3</Div> </Body></HTML>
Results:
----------------------only set a height of 100% to the body is still invalid----------------<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">Body{Height:100%; } </style> </Head> <Body> <DivID=""style= "border:1px solid green;height:30%;">Div1</Div> <DivID=""style= "border:1px solid green;height:30%;">Div2</Div> <DivID=""style= "border:1px solid green;height:30%;">Div3</Div> </Body></HTML>
Results:
-----------------------both HTML and body settings 100%----------------------
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">Html,body{Height:100%; } </style> </Head> <Body> <DivID=""style= "border:1px solid green;height:30%;">Div1</Div> <DivID=""style= "border:1px solid green;height:30%;">Div2</Div> <DivID=""style= "border:1px solid green;height:30%;">Div3</Div> </Body></HTML>
Results:
Summarize:
The width of a percentage is relative to its parent element, one method explicitly specifies the height of the parent element, and the other approach is to start with a percentage inheritance as described above from Html,body. The percentage of HTML is relative to the browser, and the other is relative to its parent element. In other words, you should develop a good habit of writing HTML pages to write html,body{height:100%} . This way, the div behind will work as a percentage.
HTML setting HTML and BODY element height issues
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
