寻找圣杯布局（译）——下

麻烦你设置padding

     我不是设计师,但是看一下上面的布局，它甚至冒犯了我的审美情感。没有设置padding列的对眼睛非常苛刻，让人难以阅读。我们需要的空格。

     真正的布局使用百分比来创建流体列的其中一个坏处是，它使得设置列的padding有点棘手。在一些屏幕宽度，padding比例往往看起来很糟糕。固定padding可以添加，但要混乱的div标记嵌套在每一列。

      使用这种技术，padding并不是一个问题。padding可以直接添加到左和右列，只需调整宽度。给上面的例子中的左列一个padding，但是保持它的全宽(padding+width)在200 px，只需修改规则如下:

#left {
  width: 180px;        /* LC fullwidth - padding */
  padding: 0 10px;
  right: 200px;        /* LC fullwidth */
  margin-left: -100%;
}

     给中心列设置padding需要多一点创造力，但是不需要更多的标记，只有少许额外的CSS。

      padding加上中心列的100%宽度会导致中心列扩大超出了非衬垫宽度的容器。为了驯服它归位，我们需要通过padding的总额来增加右外边距。这确保了该中心列只能大到如我们所期望的。

      此外，由于中心列现在是扩宽了的，左栏需要移动一个更大的距离以到达正确的地方。增加等于中心列的总padding的偏移量来奏效。

      为了让这个，我将修改示例：给每一个侧边列添加10px的padding(对于每一个侧边列来说共计20像素)，给中心列20px的padding(总共40px)。新CSS看起来像这样:

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可以添加，没有任何问题。点击这里查看设置好padding的完整模板。

     这种技术可以用em工作得很好。不幸的是，你不能混搭em和px，因此自己选择，但要明智。

等高的列
    当要具有同等高度时这种技术真的是在一起。我用的方法来自《一个真正的布局》这本书里，所以我不会详细讨论了。部署它，只需添加以下CSS：

 

 

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

     在这里，我已经给所有列底部一个额外10 padding。

      注意，Opera8有溢出的bug:隐藏，这让你所有的列变大。一个解决方法在《一个真正的布局》有详细介绍，您可以使用或等待Opera 9(已修复bug)。

      这个布局有个独特的问题，IE在容器底部并不裁剪列的背景。如果页面没有视窗那么高它们将溢出在页脚。如果你的不是单独分离的页脚，这不是一个问题，或者如果你的页面足够高，以确保你总是会占用整个视窗。

      如果你需要页脚，不过不要害怕。这也是可以解决的,但是需要一个div。给页脚添加一个wrapper，就像这样:

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

     现在这里将会用到与等高列那里相同的技巧来使包裹页脚的wrapper扩展到页面，这个问题就留下来你解决吧。

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

     解决完这个问题后，得到的就是我们想要的结果了，点击这里查看。

哦，还有一件事

（好累，不想译了+_+）