[翻译]寻找圣杯 In Search of the Holy Grail（5）

等高栏

这个布局能保证所有的栏目都是等高的，实现方式是来着与One True Layout的adapted wholesale。所以我不详细解释，增加和修改代码如下

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

我特别在下面留了10个像素

附加的说明，请注意在Opera上存在一个bug，即overflow：hidden会让你所有的栏目都变大，在One True Layout上有详细的解决办法。你可以使用这个方法或是等Opera 9（被修复了这个bug）来测试。

另一个问题是，在IE中如果内容的高度没有背景图片的高度高，背景不会被剪掉，他会超出footer。如果你没有独立的footer或是内容比背景高，这也不是个问题。如果你仍然需要一个footer，不要怕还是有解决的办法的。用一个DIV把footer封装一下就可以。

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

现在依然用上面我们使用到的让各个栏目对齐的技巧来让footer超过封装的DIV，来显示我们想要显示的内容

* 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 */ 
}

现在解决了所有的问题，得到了我们想要的结果和很少量冗余的代码。

哦,还需要说明的

完美主义者有可能是想知道是否有一个更好的方式来做到这一点？我之前声明过，我引用了一个非语义化的包含容器(DIV),确实,我们不应该包含一个额外的结构来打乱我们完美的结构.

如果你像我一样,象知道这样怎么去实现,不需要更多的结构,我向你介绍”wrapper-free Holy Grail (没有包含的圣杯)”,其最抽象的特殊之处在于,用一个DIV实现了各部分 — 不多也不少,语义化,不愧于”圣杯”的美名.其原理是相似的.主体直接应用padding不需要多余的容器,而用负边距来延伸header和footer 使其刚好达到想要的宽度.

这种布局能在所有的浏览器上正常工作,甚至(令人震惊)是在IE上,但是不是等高的.而且在非常小的窗口中是会”破掉”的,使用他的时候一定要谨慎.

最后

虽然文中提到的例子很具体,但是这项技术的使用范围确实很大.为什么不能有两个活动的中心层,为什么不调换层的顺序.这些引用都超出了本文的表述范围,但是要实现他们只需要很小的改动即可.使用圣杯是明智的.他可以成为你使用CSS的技巧之一.