完美三栏网页布局例子(5)
第五步：补充设计
如果浏览器重新调整大小，中间的容器小于左边栏的时候，整个布局都会被破坏掉，所以要设置一个min-width来保持我们的布局不被片破坏，虽然在IE6上这个属性是不起作用的，但是没关系。
body {
min-width: 550px; /* 2x LC width + RC width */
}
没有任何一个布局是不要对IE增加一些额外的工作就能完成的。(-_-!) 在IE6中负边距会使左边栏离的太远（在全宽浏览下），我们要用右边栏的宽大把他向右拉回来。并且用* html来屏蔽其他浏览器执行他.
* html #left {
left: 150px; /* RC width */
}
至于为什么要用右边栏的宽度，要牵涉到一些算法。当然我不会用去解释这些，我们只要知道这样是起作用的，我们甚至可以认为这个是IE的众多”魔法”之一。
Padding, please
我不是设计师，但是上面的布局实在是触犯了我的审美观。没有边距的栏目是很分辨和阅读的，我们需要空隙！
使用One True Layout这样百分比布局的的弊端之一就是会造成中间层的padding困难，百分比的padding在某些分辨率下会变的很难看。可以用固定宽度的padding，但是需要给每一栏内部嵌套一个div。
用这个布局padding不是问题，他可以直接给左、右边栏添加padding，只需响应的调整即可。例如我们要给上面的例子添加10px的padding，并且保持他（width+padding）还是200px，只需要小小的改动
#left {
width: 180px; /* LC fullwidth - padding */
padding: 0 10px;
right: 200px; /* LC fullwidth */
margin-left: -100%;
}
要给中心层加padding需要一个技巧，但是不需要额外的结构，只需额外的一小段css。加的100%的宽度导致中心层和外部的的padding以外（non-padded width）的宽度一样宽。为了达到我们想要的效果，我们需要增加右边的margin，使其等于padding值的总和，这样就保证了他会是我们想要的大小。
我们改变了中间层的改变成现在这样后，左边栏需要移动更多的距离才能在正确的位置上，这也是技巧所在。我们需要给右边框的抵消值（上面的right值）增加上中间层的padding值。
为了更具体的说明，我继续以上面的例子为例，现在给每一个边框增加10px的padding值（合计20px），中间层增加20px的padding值（合计40px），新的样式如下：
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 */
}
当然上下的padding值能很方便的添加，具体请参看nicely padded version 中的例子
这个布局也能在em下很好的工作，但是不能在混合em和px的时候工作，选什么你来定，但是要选的正确。
等高栏
这个布局能保证所有的栏目都是等高的，实现方式是来着与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的技巧之一.