1. Principle
Body, HTML height wait for full screen height
Using Position:absolute, the way to define the outermost div, the inner div can be rendered high by height:100%, so that can be said without the help of JS to achieve full-screen adaptive layout
About compatible with the IE6 using the upper inner edge of the body to wait until the top layer height, the lower inner margin until the height of the bottom layer , through the effect of such effects to achieve the middle layer height height:100% effect
The height of the inner layer Inner-box cannot achieve the height:100% effect in ie67 , because the child layer Position:absolute cannot be implemented if the parent layer under IE67 is in a highly indeterminate, height:100% situation
It is mentioned above that IE6 is implemented using the inner margin of the body, so
*height:expression (document.getElementById (' content '). offsetheight+ "px"); To be compatible with the IE7 inner layer height is not 100% of the problem, of course * is for ie67, the same IE6 effective
The code of the previous sentence is to use the height of the parent layer to assign a value to the child layer, so there is no problem in IE6.
2. Code
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"Xml:lang= "en"><Head> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"> <title>Document</title> <styletype= "Text/css"> /*Full-screen adaptive layout*/Html,body{width:100%;Height:100%;Overflow:Hidden;margin:0;} /*let the IE6 of the inner margin*/HTML{_height:Auto;_padding:100px 0 50px;}. Top,.content,.foot{position:Absolute; Left:0;}. Top,.foot{width:100%;}. Content{Top:100px;Bottom:50px;_height:100%;Overflow:Auto;}. Top{Top:0;Height:100px;background:#f00;}. Content{_position:relative; Right:0;_top:0;_left:0;background:#000;}. Foot{Height:50px;Bottom:0;background:#f56;}. Inner-box{Height:100%;background:#faa;*height:expression (document.getElementById (' content '). offsetheight+ "px"); } </style></Head><Body> <!--Head - <Divclass= "Top"></Div> <!--Middle - <Divclass= "Content"ID= "Content"> <!--content - <Divclass= "Inner-box"> </Div> </Div> <!--Bottom - <Divclass= "Foot"></Div></Body></HTML>
3. Role
Usually the way to use this layout is for some of the background management system of the Web page to be used, to reduce the call of JS Resize event, user-friendly, but also to prevent the rendering of the time due to JS is very large, resulting in a blank page problem.
Fully compatible full-screen adaptive layouts
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
