CSS三栏等高-高度自适应的解决方法
很多时候我们在设计网页时需要用到三栏布局，而通常情况下都有一栏需要高度自适应内容的高度来定，但是，当左右两栏的背景有颜色时，中间栏目又过高，这种情况下就会导致网页看上去参差不齐，陷入尴尬境地。其实三栏等高的布局已经有很多前辈给出了解决方法，其中有些人使用的是js来动态的判断高度，从而解决三栏等高的问题。但是通常我们能用css解决的问题尽量不要去麻烦js，毕竟js很忙，忙的用户浏览器内存占用提高。哪个更有利，我想不必多言。其实css实现三栏等高，中间高度自适应的代码一看就能懂，好了，先上代码：
CSS部分：
body {
margin: 0;
font-size: 12px;
font-family: Verdana, Arial;
text-align: center;
}
div {
overflow: hidden;
text-align: left;
}
h1,h3,p {
margin: 0;
}
#dyhead,#dyfoot {
width: 777px;
margin: auto;
background-color: #bbb;
}
#dymid {
width: 777px;
margin: auto;
background-color: #D2C6D2;
}
.dycenter {
width: 477px;
margin: 0 10px;
background-color: #eee;
}
.dyleft,.dyright {
width: 140px;
background-color: #E7DFD3;
}
.dyleft,.dycenter,.dyright {
padding-bottom: 32767px; /*使得各列都向下撑开32767像素*/
margin-bottom: -32767px; /*使得div的overflow发挥作用*/
float: left;
}
#dyfoot {
clear: both;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS三栏等高-高度自适应的解决方法</title>
</head>
<body>
<div id="dyhead">
<h1>Head</h1>
</div>
<div id="dymid">
<div class="dyleft">
<h3>Left</h3>
<p>leftpart<br />leftpart</p>
</div>
<div class="dycenter">
<h3>Center</h3>
<p>centerpart<br />centerpart<br />centerpart<br />centerpart</p>
</div>
<div class="dyright">
<h3>Right</h3>
<p>rightpart</p>
</div>
</div>
<div id="dyfoot">
<h1>Footer</h1>
</div>
</body>
</html>
这里只有一个地方需要说明一下那就是.dyleft,.dycenter,.dyright三列都用了padding-bottom和margin-bottom。这里首先将padding-bottom设置为足够长，作用是将三列向下撑开足够长（一般的页面都不会这么长）；而margin-bottom设置为负数则是为了互补刚才的padding-bottom设置，由于所有的div都被设置了overflow:hidden，所以left，center，right三列被padding撑开且无内容的部分则会被hidden，而颜色则因为padding的原因保留着。这样就达到了视觉上的高度自适应效果。
其实这样做也有个弊端，那就是在dw中编辑的时候会导致右侧的滚动条变得非常小，整个页面的高度达到了浏览器的最大高度。