Research on highly adaptive layout of Div upper and lower layers

This article from: http://blog.sina.com.cn/s/blog_4b8d35b70100mfy2.html

I. background

   When using Div + CSS-based layout development, you often need to consider the compatibility of various browser versions.

   Common Layout modes include left, right, top, and bottom, and the combination of the two modes.

   In early development, table marking was generally used.

   When trying to adopt the div-based mode, it seems that everything is not that simple. In particular, browser compatibility issues have become more prominent.

Ii. Requirements

   This article only discusses the implementation of the upper and lower layout modes. The implementation of the Left and middle right modes is much simpler. If the time is sufficient, I will detail it in another article.

   1. The height of the upper div is fixed to 100% PX and the width is;

   2. The height of the lower part (footer) div is 100% PX and the width is;

   3. The middle (middle) Div height is based on the screen height, adaptive full, width 100%;

   4. Implemented with pure Div + CSS, without using scripts to calculate the height;

   5. Adjust the browser size, and the Central Div can adapt to the screen height.

Iii. html

   This section is very simple. It only defines three Divs, corresponding to top, middle, and footer.

   <Div id = "Header">
       Header </div>
   <Div id = "Middle">
       1 page <br/>
       2 pages <br/>
       3 pages <br/>
       4 pages <br/>
       5 pages <br/>
       6 pages <br/>
       Page 7 <br/>
       8 pages <br/>
       9 pages <br/>
   </Div>
   <Div id = "footer">
       Footer

    </Div>

Iv. CSS implementation

   To facilitate understanding of the implementation principle, the following two parts are described:

   1. Implementation in IE6

<Style type = "text/CSS">
*{
 Margin: 0;
 Padding: 0;
}
HTML, body {
 Padding: 100px 0;  
 Width: 100%;
 Height: 100%;
 Overflow: hidden;
}
# Header {
 Position: absolute;
 Top: 0;
 Width: 100%;
 Height: 100px;
 Background: # CCC;
 Line-Height: 100px;
 Text-align: center;
}
# Middle {
 Position: relative;
 Top:-100px;
 Height: 100%;
  
 Bottom: 100px;
 Width: 100%;
 Background: # FFC;
 Text-align: center;
 Overflow: auto;
}
# Footer {
 Position: absolute;
 Bottom: 0;
 Width: 100%;
 Height: 100px;
 Background: # CCC;
 Line-Height: 100px;
 Text-align: center;
}
</Style>  

   2. Implementation in IE7 and IE8

<Style type = "text/CSS">
*{
 Margin: 0;
 Padding: 0;
}
HTML, body {
 Width: 100%;
 Height: 100%;
 Overflow: hidden;
}
# Header {
 Position: absolute;
 Top: 0;
 Width: 100%;
 Height: 100px;
 Background: # CCC;
}
# Middle {
 Position: absolute;
 Top: 100px;
 Height: auto;
 Bottom: 100px;

 Width: 100%;
 Background: # FFC;
 Text-align: center;
 Overflow: auto;
}
# Footer {
 Position: absolute;
 Bottom: 0;
 Width: 100%;
 Height: 100px;
 Background: # CCC;
 Line-Height: 100px;
 Text-align: center;
}
</Style>

5. All CSS code

<Style type = "text/CSS">
*{
 Margin: 0;
 Padding: 0;
}
HTML, body {
 
 Padding: 0! Important;
 
 Padding: 100px 0;
  
 Width: 100%;
 Height: 100%;
 Overflow: hidden;
}
# Header {
 Position: absolute;
 Top: 0;
 Width: 100%;
 Height: 100px;
 Background: # CCC;
 Line-Height: 100px;
 Text-align: center;
}
# Middle {
 
 Position: absolute! Important;
 Top: 100px! Important;
 Height: Auto! Important;
 
 Position: relative;
 Top:-100px;
 Height: 100%;
  
 Bottom: 100px;
 Width: 100%;
 Background: # FFC;
 Text-align: center;
 Overflow: auto;
}
# Footer {
 Position: absolute;
 Bottom: 0;
 Width: 100%;
 Height: 100px;
 Background: # CCC;
 Line-Height: 100px;
 Text-align: center;
}
</Style>