一种兼容性强的圣杯布局写法

在web前端这个领域，面试或者实战中不可避免的要聊到圣杯布局和双飞翼布局，这两种布局能力体现面试者懂HTML结构又能体现出其对ＤIV+CSS布局的掌握，毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验。

比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。

今天先说说圣杯布局，圣杯布局的出现是来自于a list part上的一篇文章In Search of the Holy Grail，原文讲到：

Many articles have been written about the grail, and several good templates exist. However, all the existing solutions involve sacrifices: proper source order, full-width footers, and lean markup are often compromised in the pursuit of this elusive layout.

A recent project has brought my personal grail quest to an end. The technique I’ll describe will allow you to deploy the Holy Grail layout without compromising your code or your flexibility.

文章作者经过对前人的经验汇总，做出优化使Holy Grail布局特点：

1. 三栏布局，左右侧边栏定宽，中间内容自适应；
2. 在HTML结构中中间栏写在最前面，保证主内容区优先渲染；
3. 允许任何列成为最高列；
4. 只需要一个额外的DOM结点（多一个div）；
5. 需要最少的CSS，产生最少的hacks patchs;

所需的HTML结构如下：

<div id="header"></div>
    <div id="container">
        <div id="center" class="column"></div>
        <div id="left" class="column"></div>
        <div id="right" class="column"></div>
    </div>
<div id="footer"></div>

以上结构中，将#center写在前面是为了优先渲染主要内容区

下面来说说实现它的css（注释中的LC代表左边栏，RC代表右边栏，CC代表中间栏）：

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

使用padding，让内容合理分开：

body {
  min-width: 630px;      /* 2x (LC fullwidth +
                            CC padding) + RC fullwidth */
}
#container {
  padding-left: 200px;   /* LC fullwidth */
  padding-right: 190px;  /* RC fullwidth + CC padding */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  padding: 10px 20px;    /* CC padding */
  width: 100%;
}
#left {
  width: 180px;          /* LC width */
  padding: 0 10px;       /* LC padding */
  right: 240px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}
#right {
  width: 130px;          /* RC width */
  padding: 0 10px;       /* RC padding */
  margin-right: -190px;  /* RC fullwidth + CC padding */
}
#footer {
  clear: both;
}/*** IE Fix ***/
* html #left {
  left: 150px;           /* RC fullwidth */
}

下面来解决让三个栏等高（Equal-height columns）的问题，这里的解决方案来源于这里，在此不再详述，直接使用以下css code：

#container {
  overflow: hidden;
}
#container .column {
  padding-bottom: 20010px;  /* X + padding-bottom */
  margin-bottom: -20000px;  /* X */
}
#footer {
  position: relative;
}

在这里，我在底部给了列一个额外的10px的填充。请注意Opera8有一个溢出的bug:hidden，它会让您的所有列都变大。您可以使用它，或者等待Opera9（它修复了这个bug）从测试版中出来。这个布局特有的另一个问题是IE没有在容器底部剪裁列背景。如果页面没有视区那么高，它们会溢出页脚。如果页面足够高过视区，那这不是个问题。当真的出现不够高的情况，不要害怕。这也是可以修复的，但还需要一个div。在页脚添加一个包装，如下所示：

<div id="footer-wrapper">
  <div id="footer"></div>
</div>

然后用*号修补css去处理这个hack，修补的css code如下：

* html body {
  overflow: hidden;
}
* html #footer-wrapper {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #fff;         /* Same as body background */
}

布局完成后的效果，请看demo。