CSS 3栏等高合理布局完成方式

最先，3栏等高合理布局，说白了，能够归纳为下列特点：
1、3列（傻子也了解）
2、这3列高相同
3、这3列的高宽比并不是固定不动不会改变，而是伴随着內容的转变而转变

Step 1:
xhtml编码：

关键构造式#container的div，至于#header和#footer，彻底是以便让它可以更像网页页面1些，返回#container，它內部包括3列，在其中main里包括的是1个网页页面最关键，最关键的內容，因此大家不可以懈怠，在纯xhtml的流文本文档中，访问器是从上到下分析的，故关键的內容应当放在较为靠前的部位，这是由检索模块的权重决策的吧，可是视觉效果上，大家待会儿会把它放到正中间。

思索1下：这3列如何将会在沒有写死高宽比的情况下还智能化的并驾齐驱呢？
实际上不写死高宽比确实不可以办到智能化的并驾齐驱，那如何写死高呢，回答便是，运用盒实体模型，写它的padding，这是1种超级变态的方式，但挺见效，就如同1本人 仅有具体仅有170cm,可是算上20cm的秀发，天啊，他早已是190cm了，還是先得出处理方式吧：便是运用padding-bottom和margin-bottom;

Step2:

Step3:

这1步应当算是本主题的关键，至于32767 这个数你能够了解成“充足大”，便于于有充足的室内空间去拓展它的盒子，这么高应当是超大型巨人症吧，没事儿，大家能够用margin-bottom的负值去掩藏它，这个技能，我认为，我真的解释不清晰，有句古话： 会意，言传！  你要是试一试，就会领悟到在其中的奥秘。下边这幅图对你的了解应当有协助：

到了这步，你会发现这3列的盒实体模型为32767px，此时你要在父元素上加：overflow: hidden;自然IE6.0是：zoom:1;

Step4:
如今#main的视觉效果实际效果是在最左栏，大家要想方法把它搞成正中间
思路：先把#main排到正中间，大家能够#main{margin-left:300},这时候，#left被挤到800px的部位，在#left{margin-left:⑻00px;}就可以搞定，可是啊，IE6这个贱货，确实是无语，只得再次思索了。

1般的，在css做合理布局时，有几种思路，1种是float,1种是精准定位，有关精准定位的话，不熟习的google1下就行，提1下：position: relative;的这个特性，假如不指明top,left的话，它的视觉效果实际效果不容易更改。
因此，以便让#main在视觉效果实际效果上有一定的提升，那末务必指明top或left，在这里只必须指明left就可以了,

实际上在这正中间，也有1个定义是较为关键的，#main，#left有了position:relative之后，就有了层的定义，因此当#main{left:300px}后，#left早已单独出来了，不容易被挤到800px的部位了，故：之必须left:⑸00px就可以做到左侧，500是#main的宽。
最终考虑到的是向下适配，
出示1段编码：

尽管写了这么多，可是你可以做，其实不意味着你应当这么做，这是1个战术和发展战略的难题，下列是我本人想了解的：
我感觉1刚开始：

这么大的值，在reflow环节会不容易很耗資源，而选用js来操纵她们的高宽比，会不容易来得更轻轻松松1些呢？

第1次写这类东东，觉得很繁杂，无论是构思上還是在語言表述上都還是很晦涩难懂的，期待大伙儿积极主动的纠正，期待能和更多的盆友来开展沟通交流，1层面是提升自身，另外一层面是推动小区的和睦和共享资源，尽1份自身甚少的能量。