圣杯布局是討論「三欄液態(tài)布局」的實(shí)現(xiàn)，它最早出自于誰或許不得而查了，但最早的完美實(shí)現(xiàn)是來自于 Matthew Levine 于2006年在「A LIST APART」上寫的一篇文章，它主要講述了網(wǎng)頁中關(guān)于最佳圣杯的實(shí)現(xiàn)方法。

所謂液態(tài)布局是相對(duì)固態(tài)布局而言的，固態(tài)布局就是固定值不變的布局，液態(tài)就好比在容器里到了一杯水，它可以隨著容器寬度的變化而自適應(yīng)寬度。

接下來一起動(dòng)手來實(shí)現(xiàn)一個(gè)圣杯布局

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

<header id="head">我是頭部</header>
<div id="container">
    <div id="center">我在中間</div>//中間欄優(yōu)先渲染，所以放兩邊欄前邊
    <div id="left">我在左邊</div>
    <div id="right">我在右邊</div>
</div>
<footer id="foot">我是尾部</footer>

接著我們給每一欄配上合適的寬度，并將它們?cè)O(shè)為浮動(dòng)。同時(shí)我們需要清除 footer 的上下環(huán)境，以免遭跟上面三欄一起浮動(dòng)。

#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的寬度而言的。

• 左右兩欄由于排在中間欄的后面，且因?yàn)榭臻g不夠被擠到了中間欄的下面，如下圖所示：

  
  
  第一步.png

第二步：把左右側(cè)欄放上去。（利用負(fù)邊距布局）

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

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

首先，我們先將它的外邊距設(shè)置為-100%，這樣一來，由于浮動(dòng)的關(guān)系，左側(cè)欄就能上位，與中間欄交疊在一起，并占據(jù)了左邊。而右側(cè)欄由于左側(cè)欄的上位，自動(dòng)向前浮動(dòng)到了原來左側(cè)欄的位置。

然后，我們需要把右側(cè)欄放上去，此時(shí)只需利用上面的原理把他放到 container的右外邊距的位置即可，我們需要再一次設(shè)置一個(gè)負(fù)外邊距的值，它等于右側(cè)欄的寬度。效果如下：

2.png

第三部：設(shè)置container容器的左右邊距值分別為左右欄的寬。

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

效果圖如下：

3.png

第四步：給左右兩個(gè)盒子加一個(gè)定位，加了定位之后左右兩個(gè)盒子就可以設(shè)置left和right值。

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

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

效果圖如下：

4.png

當(dāng)縮放瀏覽器時(shí)(頁面有一個(gè)最小縮小值，為了安全起見，最好還是給body加一個(gè)最小寬度!)，中間欄的寬度自適應(yīng)，兩邊欄的寬度固定不變。
如下圖：

縮小瀏覽器效果圖

到此為止，我們已經(jīng)實(shí)現(xiàn)了一個(gè)圣杯布局了。

參考文章：
關(guān)于圣杯布局
圣杯布局和雙飛翼布局
這可能是史上最全的CSS自適應(yīng)布局總結(jié)教程