引言
「圣杯布局」?? 尽管这是一个很古老的话题了，而且网上早就有许多相关的文章，但作为前端入门和面试的必备知识之一，还是觉得有必要温故而知新一番。尤其是在拜读了「yuanzm」的博客 《我是如何同时拿到阿里和腾讯offer的》 文章后，更感到对于任何别人的知识至少都需要花点时间自己实践一下，了解一下它的原理甚至是历史，而不应盲目引用和浮于表面。谨以此文表示感谢~
圣杯的由来
圣杯布局是讨论「三栏液态布局」的实现，它最早出自于谁或许不得而查了，但最早的完美实现是来自于 Matthew Levine 于2006年在「A LIST APART」上写的一篇文章，它主要讲述了网页中关于最佳圣杯的实现方法。
所谓液态布局是相对固态布局而言的，固态布局就是固定值不变的布局，液态就好比在容器里到了一杯水，它可以随着容器宽度的变化而自适应宽度。
在这篇文章中，作者指出了当时的一些实现方式所存在的问题，如：必须按照源顺序（在 DOM 中表现为先写 Left，然后 Middle，最后，Right）等，它将可能导致代码不够灵活，尤其是从 DOM 的载入顺序上来说，中间的内容不能被首先加载。
因此他给出一个方案，它将：
两边带有固定宽度中间可以流动（fluid）；
允许中间一栏最先出现；
允许任意一栏放在最上面；
仅需一个额外的 div 标签
仅需非常简单的 CSS，带上最少的兼容性补丁
文中还提到了他的这个想法是基于「One True Layout」 和 「 Eric Meyer’s adaptation」两篇文章带来的灵感。
在这里你可以看到「圣杯布局」的最终效果： http://alistapart.com/d/holygrail/example_1.html
实现方式
接下来就言归正传，说下具体的实现思路：
首先我们需要布局的 HTML 代码如下，作者在这里为了便于表达，对标签使用了非语义化的 id ，他建议在其他任何正式项目中尽量使用语义化的 id 。例如，我们需要实现的是左侧宽度为 200px，右侧宽度为 150px，中间是流动的布局。
#header
查看更多关于?关于[圣杯布局]_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114353