圣杯布局

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


经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:

  1. 三列布局,中间宽度自适应,两边定宽

  2. 中间栏要在浏览器中优先展示渲染

  3. 允许任意列的高度最高

  4. 要求只用一个额外的DIV标签

  5. 要求用最简单的CSS、最少的HACK语句

效果图:

CSS 和 DOM 代码如下:




    
    
    圣杯布局
    


    
头部

主内容栏自适应宽度

侧边栏固定宽度

主内容栏自适应宽度

侧边栏固定宽度

主内容栏自适应宽度

侧边栏1固定宽度

侧边栏2固定宽度

主内容栏自适应宽度

侧边栏1固定宽度

侧边栏2固定宽度

主内容栏自适应宽度

侧边栏1固定宽度

侧边栏2固定宽度

底部

你可能感兴趣的:(圣杯布局)