圣杯布局

圣杯布局是讨论「三栏液态布局」的实现，它最早出自于谁或许不得而查了，但最早的完美实现是来自于 Matthew Levine 于2006年在「A LIST APART」上写的一篇文章，它主要讲述了网页中关于最佳圣杯的实现方法。

所谓液态布局是相对固态布局而言的，固态布局就是固定值不变的布局，液态就好比在容器里到了一杯水，它可以随着容器宽度的变化而自适应宽度。

接下来一起动手来实现一个圣杯布局

第一步：建立框架，并加入三栏

我是头部

    
我在中间
//中间栏优先渲染，所以放两边栏前边
    
我在左边
    
我在右边

我是尾部

接着我们给每一栏配上合适的宽度，并将它们设为浮动。同时我们需要清除 footer 的上下环境，以免遭跟上面三栏一起浮动。

#container{
    height: 200px;
}

#center{
    width: 100%;
    float: left;
    height: 200px;
}

#left{
    width: 200px;
    float: left;
    height: 200px;
}

#right{
    width: 202px;
    float: left;
    height: 200px;
}

#foot{
    clear: both;
}

注意：

• 这里中间一栏的 100% 宽是基于它的父容器container的宽度而言的。

• 左右两栏由于排在中间栏的后面，且因为空间不够被挤到了中间栏的下面，如下图所示：

  
  
  

  第一步.png

第二步：把左右侧栏放上去。（利用负边距布局）

#left{
  margin-left: -100%;
}

#right{
  margin-left: -202px;
}

首先，我们先将它的外边距设置为-100%，这样一来，由于浮动的关系，左侧栏就能上位，与中间栏交叠在一起，并占据了左边。而右侧栏由于左侧栏的上位，自动向前浮动到了原来左侧栏的位置。

然后，我们需要把右侧栏放上去，此时只需利用上面的原理把他放到 container的右外边距的位置即可，我们需要再一次设置一个负外边距的值，它等于右侧栏的宽度。效果如下：

2.png

注意：中间栏的文字被覆盖了。

第三部：设置container容器的左右边距值分别为左右栏的宽。

#container{ 
  padding: 0  202px  0  200px;
}

效果图如下：

3.png

第四步：给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。

#left{
   position: relative;
   left: -200px;
}

#right{
  position: relative;
  right: -202px;
}

效果图如下：

4.png

当缩放浏览器时(页面有一个最小缩小值，为了安全起见，最好还是给body加一个最小宽度!)，中间栏的宽度自适应，两边栏的宽度固定不变。
如下图：

缩小浏览器效果图

到此为止，我们已经实现了一个圣杯布局了。

参考文章：
关于圣杯布局
圣杯布局和双飞翼布局
这可能是史上最全的CSS自适应布局总结教程