聖杯布局是為了討論「三欄液態布局」的實現，最早的完美實現是由 matthew levine 在 2006 年寫的一篇文章 《in search of the holy grail》 ，它主要講述了網頁中關於最佳聖杯的實現方法。
它有以下幾點要求：
接下來，將會介紹兩種實現的方法。它們的最終效果都一樣，如下圖：
先上**：
doctype html解析一下思路：>
<
html
lang
="zh-cn"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>聖杯布局
title
>
<
meta
name
="description"
content
="聖杯布局測試"
/>
<
meta
name
="keywords"
content
="聖杯布局測試"
/>
head
>
<
style
type
="text/css"
>
.header, .footer
.footer
.container
.left, .middle, .right
.middle
.left
.right
style
>
<
body
>
<
div
class
="header"
>
<
h4>header
h4>
div>
<
div
class
="container"
>
<
div
class
="middle"
>
<
h4>middle
h4>
<
p>middle-content
p>
div>
<
div
class
="left"
>
<
h4>left
h4>
<
p>left-content
p>
div>
<
div
class
="right"
>
<
h4>right
h4>
<
p>right-content
p>
div>
div>
<
div
class
="footer"
>
<
h4>footer
h4>
div>
body
>
html
>
用彈性盒子來實現聖杯布局特別簡單，只需要把中間的部分用flex布局即可。
<div
class
="header"
>
<
h4>header
h4>
div>
<
div
class
="container"
>
<
div
class
="left"
>
<
h4>left
h4>
<
p>left-content
p>
div>
<
div
class
="middle"
>
<
h4>middle
h4>
<
p>middle-content
p>
div>
<
div
class
="right"
>
<
h4>right
h4>
<
p>right-content
p>
div>
div>
<
div
class
="footer"
>
<
h4>footer
h4>
div>
.header, .footer .container .left .middle .right解析一下思路：
總的來說，彈性布局是最適合實現聖杯布局的方法了，相較浮動，彈性布局的結構更清楚，更好理解，也不用擔心移動端的適配問題。
而浮動的方法，在面試中可能會遇到，主要考察對布局的理解能力。所以，建議大家可以把浮動的例子拷貝下來，自行模擬一把，以便加深理解。
**：
實現聖杯布局
聖杯布局特點 左右兩欄都是固定的寬度，中間欄的寬度隨著瀏覽器的變化而變化 在網頁載入過程中先載入中間主體在載入兩邊部分 效果 例項 左邊右邊 疑難點1.不要給container盒子設定寬度 因為他會繼承瀏覽器的寬度，如果設定了盒子寬度100 那麼我們在使用內邊距的時候就會出現滾動條，這個時候可以使用...
聖杯布局 浮動實現
聖杯布局是一種很常見的css布局。他要求 1 上部和下部各自占領螢幕所有寬度。2 上下部之間的部分是乙個三欄布局。3 三欄布局兩側寬度不變，中間部分自動填充整個區域。4 中間部分的高度是三欄中最高的區域的高度。浮動實現 12 3 1 填充三欄這一步驟，首先給底部區域清除浮動，防止跟隨上邊的區域一起浮...
《前端》實現聖杯布局
最近正好碰到了寫這種布局，一直沒有總結過正好借這次機會總結一波，同時加強一下自己的理解。聖杯布局和雙飛翼布局作為經典的三欄式布局是面試中的常客。兩種布局達到效果上基本相同，都是兩邊兩欄寬度固定，中間欄寬度自適應。在html結構上中間欄在最前面保證了最先渲染中間提公升效能 因為這兩種布局都比較老，我認...