Typical three rows and two columns centered height adaptive div css layout_html/css_WEB-ITnose

如何使整个页面内容居中，如何使高度自适应内容自动伸缩，这是学习CSS布局最常见的问题。

 

下面给出一个实际的列子，附详细说明。

 

首先可以将下列代码复制到html文件中运行一下，在mozilla、opera和ie浏览其中，均可达到居中且自适应高度的要求。

 

body

{

       background:#999;

       text-align:center;

       color:#333;

       font-family:Arial, Verdana, Sans-serif;

}

#header

{

       width:776px;

       margin-left:auto;

       margin-right:auto;

       padding:0px;

       background:#eee;

       height:60px;

       text-align:center;

}

#container

{

       margin-left:auto;

       margin-right:auto;

       width:776px;

}

#mainbg

{

       width:776px;

       padding: 0px;

       background:#60A179;

       float:left;

}

#right

{

       float:right;

       margin:2px 0px 2px 0px;

       padding:0px;

       width:574px;

       background:#ccd2de;

       text-align:left;

}

#left

{

       float:left;

       margin:2px 2px 0px 0px;

       padding:0px;

       background:#f2f3f7;

       width:200px;

       text-align:left;

}

#footer

{

       clear:both;

       width:776px;

       margin-right:auto;

       margin-left:auto;

       padding:0px;

       background:#eee;

       height:60px;

}

.text

{

       margin:0px;

       padding:20px;

}

header

      

             

                    

right

1

2

3

                    

             

             

                    

left

                    

             

      

       footer

First we define the body and top area #header, the key here It is text-align: center in the body; and margin-left: auto and margin-right: auto in the header; the function is similar to centering the header area in the browser. Note: In IE, you only need to define text-align:center of the body to center it, but in mozilla (firefox), margin:auto is required.

Next are the left and right areas. In order to center these two columns, a container is now nested outside them, and margin: auto is set. The principle is the same as above. In this way, left and right are also centered as a whole.

You may be wondering why there is a layer of mainbg between the container and left and right. What is the role of this layer? This layer is used to define the background, so why not define the background directly in the container, but in multiple layers? The reason is that mozilla (firefox) is causing trouble (you don’t want the webpage you made to be displayed differently in firefox and ie). There is no need to nest one more layer in ie. In mozilla, the height value must be defined. The background can be displayed, but if the height is specified, the adaptive height requirement cannot be achieved, so an extra layer of mainbg is added. The trick lies in the float: left of the mainbg layer; defined in this way, the background can be displayed without specifying the height.

The last thing defined is the footer layer at the bottom. The key point of this layer is clear: both; the function of this sentence is to cancel the floating inheritance of the footer layer. Otherwise, you will see that the footer is displayed close to the header, or Mozilla is doing something weird :)

It is said that it is over here, but careful friends will see the difference between left and right. One layer is nested, and both layers use .text{margin:0px;padding:20px}. Why is this? The reason is that Mozilla and IE have different interpretations of the box model. Directly defining margin and padding will cause inconsistencies in the displays in Mozilla and IE. Therefore, when encountering inconsistencies between IE and Mozilla, adding an extra layer will often solve the problem.