CSS 三栏等高布局实现方法
我要评论首先，三栏等高布局，顾名思义，可以概括为以下特征：
1、3列
2、这3列高等相等
3、这3列的高度不是固定不变，而是随着内容的变化而变化
Step 1:
xhtml代码：
<div id="header">#header</div>
<div id="container">
<div id="main" class="column">#main</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
主要结构式#container的div，至于#header和#footer，完全是为了让它能够更像网页一些，回到#container，它内部包含三列，其中main里包含的是一个网页最核心，最主要的内容，所以我们不能怠慢，在纯xhtml的流文档中，浏览器是从上到下解析的，故重要的内容应该放在比较靠前的位置，这是由搜索引擎的权重决定的吧，但是视觉上，我们待会儿会把它放到中间。
思考一下：这三列怎么可能在没有写死高度的时候还智能的齐头并进呢？
其实不写死高度的确不能办到智能的齐头并进，那怎么写死高等呢，答案就是，利用盒模型，写它的padding，这是一种方法，但挺奏效，就好比一个人 只有实际只有170cm,但是算上20cm的头发，天啊，他已经是190cm了，还是先给出解决方法吧：就是利用padding-bottom和margin-bottom;
Step2:
#container {
background-image: url('bg.gif');
width: 960px;
margin: 0 auto;
}
#main{float: left: width: 500px;background-color: #e5e5e5;}
#left{float: left: width: 300px;background-color: #7bd;}
#right{float: right: width: 160px;background-color: #f63;}
Step3:
#container .column{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
这一步应该算是本主题的核心，至于32767 这个数你可以理解成“足够大”，以便于有足够的空间去扩展它的盒子，这么高应该是巨人症吧，没关系，我们可以用margin-bottom的负值去隐藏它，这个技巧，在我看来，我真的解释不清楚，有句古话： 意会，言传！ 你只要试试看，就会领会到其中的奥妙。下边这幅图对你的理解应该有帮助：
到了这步，你会发现这3列的盒模型为32767px，此时你要在父元素上加：overflow: hidden;当然IE6.0是：zoom:1;
#container {
background-image: url('bg.gif');
width: 960px;
margin: 0 auto;
overflow: hidden;
}
Step4:
现在#main的视觉效果是在最左栏，我们要想办法把它搞成中间
思路：先把#main排到中间，我们可以#main{margin-left:300},这时，#left被挤到800px的位置，在#left{margin-left:-800px;}就能搞定，可惜啊，IE6，实在是无语，只得重新思考了。
一般的，在css做布局时，有几种思路，一种是float,一种是定位，关于定位的话，不熟悉的google一下就行，提一下：position: relative;的这个属性，如果不指明top,left的话，它的视觉效果不会改变。
所以，为了让#main在视觉效果上有所突破，那么必须指明top或者left，在这里只需要指明left就行了,
#main {
float: left;
background-color: #e5e5e5;
width: 500px;
left: 300px;
}
#left {
float: left;
background-color: #7bd;
width: 300px;
left: -500px;
}
其实在这中间，还有一个概念是比较重要的，#main，#left有了position:relative以后，就有了层的概念，所以当#main{left:300px}后，#left已经出来了，不会被挤到800px的位置了，故：之需要left:-500px就能达到左边，500是#main的宽。
最后考虑的是向下兼容，
提供一段代码：
虽然写了这么多，但是你能够做，并不代表你应该这么做，这是一个战术和战略的问题，以下是我个人想知道的：
我觉得一开始：
padding-bottom: 32767px;
margin-bottom: -32767px;
这么大的值，在reflow阶段会不会很耗资源，而采用js来控制他们的高度，会不会来得更轻松一些呢？
第一次写这种东东，感到很棘手，不管是构思上还是在语言表达上都还是很晦涩的，希望大家积极的指正，希望能和更多的朋友来进行交流，一方面是提高自己，另一方面是促进社区的和谐和共享，尽一份自己微薄的力量。
相关文章
这篇文章主要介绍了css设置多列等高布局的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-21
我们在写页面的时候，有的时候会遇到多栏布局，这篇文章主要介绍了前端应该掌握的CSS实现多列等高布局技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟2018-06-05- 这篇文章给大家介绍了三个小节的内容，其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局，有需要的可以参考2016-09-12
- 下面小编就为大家带来一篇浅析CSS等高布局的6种方式。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-04
- 页面布局中经常遇到等高布局的情况，为了得到更好的视觉效果，就要实现DIV等高布局的效果。以最普遍的DIV三列布局来说2014-09-03
- 这种情况下就需要两列的高度保持一致了，左边高度增加，右边也跟着增加，右边高度增加，左边同样也要增加，否则就会出现“断层”的效果,接下来将介绍多列等高的实现方法，2012-12-03
- 网页制作Webjx文章简介：为了让网页更美观、协调，有的时候需要用到左右等到布局，传统的等高布局是用 javascript 实现的，现在来看看 silence 发明的真正的 CSS 实现的等2009-04-02
- 三列等高CSS布局的一个实例， 修改国外的一个demo， 兼容到了IE5.5 和标准的浏览器OperaFirefoxSafari。 不过hack太多，不是很喜欢这样做。 全部代码如下2008-10-17
本文讲的等高布局是在不手动设置元素高度的情况下，使用纯css实现各个元素高度都相当的效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看2019-01-09
最新评论