overflow与position是两种不同的人生境界（附多栏等高的实现）

这个姑且算是最近看《德道经》的偶悟吧。

先说问题。Twitter相信大家都知道，或者国内的QQ微博、新浪微博。一般页面宽度800px，两栏。左右“内容等高”，这里要打个引号。右栏一般是带色的，左栏则为白底，看起来是等高。

虽然大多数情况下左高>右高，但如何确保万无一失，实现两栏自适应等高呢？先来看看各大网站的实现，知己知彼才能百战不殆。

1、Twitter。X！居然是用table实现的- -。在这个号称div+css满天飞的Web2.0时代，他们居然用这么老土的table？！然而正如《德道经》里讲到，天为乾，地为坤，天地中和乃生万物。”土“是一种返璞归真的精神。成语”出生入死“讲得就是”入土为安“的道理。人家用table自然有他自己的道理，语义化上table用来呈现数据也说得过去，毕竟人家是这么大的一个平台，还得考虑兼容性，当然最初的原因是否是为了实现这个左右栏等高也说不定（偷笑），所以都说twitter网站做得烂。

2、QQ微博。用了个偷鸡取巧的方法。在父容器#mainWrapper上加了个居右、纵轴平铺的bg，既然是repeat-y，干嘛图片要210*49这么奇怪的宽高？还好用的是data-uri省了个http request，要不猫哥就要BS它了。

3、新浪微博。对新浪有偏见，懒得说它，我是力顶三表哥的。

这里引入一个通过纯CSS的实现方法，这种负边距的方法当然不是猫哥发明的，我也是从这里看到的。这里顺带说下CSS布局的话，推荐射雕同学的系列文章，很详细了。

废话少说，直接移步去看DEMO，右键查看下源代码。

在DEMO上如果注意看的话会发现有一句

#description{overflow:hidden}

 

实现这个效果，就得在他们的父容器上加上overflow:hidden，这样才能把难看的长尾巴遮住。忽然就想起小高、干干、欣欣他们刚入职的时候，给他们讲过一节CSS的中级（不是终极）培训。我说，如果遇到IE下奇怪的样式兼容性BUG，排名第二的来个overflow:hidden试试（排名第一的是zoom:1）。这句话是我的经验之谈，而且大多数情况下还挺管用。

然而今天在我写下这段代码之后，结合之前看的那一点点《德道经》的内容，我忽然意识到overflow:hidden是一个巨大的阴谋。它让一些本来存在的事物，不被外界所知道，它把一些充满活力的元素限制在一个死死的条框中，让这块土地死气沉沉。《国语·周语上》有云“防民之口，甚于防川，川壅而溃，伤人必多，民亦如之。是故为川者，决之使导；为民者，宣之使言。”

twitter上刚刚看到@fenng同学说自己已经离职支付宝，祝愿他前程似锦。在我看来，主动选择离职创业的人，都是勇敢的。想起昨晚半亩地吃饭，送走一位即将去美利坚合众国求学的友人。相信他的世界已经不再是overflow:hidden，而是position:relative。正如本文中的配图，风筝是一个absolute的元素，它飞得再高再远，对于线另一头的主人来说，永远联系牵挂在心。

overflow与position是两种截然不同的修身、治国（管理）、平天下的人生境界。就算没有鲲鹏展翅那般注目，一只苍蝇至少有一双可以自由飞翔的翅膀。