CSS布局终极方案之--圣杯布局（兼容IE6+，现代浏览器）

摘要
经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin
Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：
1、三列布局，中间宽度自适应，两边定宽； 2、中间栏要在浏览器中优先展示渲染； 3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签； 5、要求用最简单的CSS、最少的HACK语句；

CSS兼容所有浏览器(IE6+，现代浏览器)的终极布局方案之 -- 圣杯布局

效果如下：

CSS 和 DOM 代码如下：

    
    
    

    
    body {background-color: #ffffff; font-size:14px;}
    #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}
    .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}
    .main {background-color: #03a9f4; color:#ffffff;}
    .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}
    p {margin:0; padding:20px; text-align: center;}

    
    .bd-lft {
 zoom:1;
 overflow:hidden;
 padding-left:210px;
    }
    .bd-lft .aside {
 float:left;
 width:200px;
 margin-left:-100%; 

 position:relative;
 left:-210px; 
 _left: 0; 
    }
    .bd-lft .main {
 float:left;
 width:100%;
    }

    
    .bd-rgt {
 zoom:1;
 overflow:hidden;
 padding-right:210px;
    }
    .bd-rgt .aside {
 float:left;
 width:200px;
 margin-left:-200px; 

 position:relative;
 right:-210px; 
    }
    .bd-rgt .main {
 float:left;
 width:100%;
    }

    
    .bd-3-lr {
 zoom:1;
 overflow:hidden;
 padding-left:210px;
 padding-right:210px;
    }
    .bd-3-lr .main {
 float:left;
 width:100%;
    }
    .bd-3-lr .aside-1 {
 float: left;
 width:200px;
 margin-left: -100%;

 position:relative;
 left: -210px;
 _left: 210px; 
    }
    .bd-3-lr .aside-2 {
 float: left;
 width:200px;
 margin-left: -200px;

 position:relative;
 right: -210px;
    }

    
    .bd-3-ll {
 zoom:1;
 overflow:hidden;
 padding-left:420px;
    }
    .bd-3-ll .main {
 float:left;
 width:100%;
    }
    .bd-3-ll .aside-1 {
 float: left;
 width:200px;
 margin-left: -100%;

 position:relative;
 left: -420px;
 _left: 0px; 
    }
    .bd-3-ll .aside-2 {
 float: left;
 width:200px;
 margin-left: -100%;

 position:relative;
 left: -210px;
 _left: 210px; 
    }

    
    .bd-3-rr {
 zoom:1;
 overflow:hidden;
 padding-right:420px;
    }
    .bd-3-rr .main {
 float:left;
 width:100%;
    }
    .bd-3-rr .aside-1 {
 float: left;
 width:200px;
 margin-left: -200px;

 position:relative;
 right: -210px;
    }
    .bd-3-rr .aside-2 {
 float: left;
 width:200px;
 margin-left: -200px;

 position:relative;
 right: -420px;
    }

    




    头部

    
 
     
主内容栏自适应宽度
 

 
     
侧边栏固定宽度
 
    

    
 
     
主内容栏自适应宽度
 

 
     
侧边栏固定宽度
 
    

    
 
     
主内容栏自适应宽度
 

 
     
侧边栏1固定宽度
 

 
     
侧边栏2固定宽度
 
    

    
 
     
主内容栏自适应宽度
 

 
     
侧边栏1固定宽度
 

 
     
侧边栏2固定宽度
 
    

    
 
     
主内容栏自适应宽度
 

 
     
侧边栏1固定宽度
 

 
     
侧边栏2固定宽度
 
    

    底部

作者：山哥 http://my.oschina.net/jsan