方法一：伪列布局法（利用背景图）
所谓伪列布局法，就是设计一个背景图像，利用背景图像来模拟栏目的背景。如，使用Photoshop设计一个长方形的背景图，长度与页面宽度保持一致，高度任意。
代码中要用到的背景图：
bg.gif（代码中背景图 800*77）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设计多栏高度自适应页面_伪列布局法</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body { text-align: center; }
#model {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#header { background: #FF00FF; }
#main {
position: relative;
width: 100%;
background: url(images/bg.gif) center repeat-y
}
#content {
margin-left: 25%;
margin-right: 20%;
}
#subplot {
width: 20%;
position: absolute;
right: 0;
top: 0;
}
#serve {
width: 25%;
position: absolute;
left: 0;
top: 0;
}
#footer {
background: #FF99FF;
}
</style>
<script type="text/javascript" language="javascript">
/*解决#subplot #serve 因绝对定位脱离文档流，使#mian包含框的高度就为#content的高
度，此脚本会使#mian的高度为三个子栏最高的一栏的高度
即#serve的高度；*/
window.onload = function(){
var main = document.getElementById("main");
// 定义即将控制的外框div
var left = document.getElementById("subplot").offsetHeight;
// 获得内部三栏中ID = subplo的div高度
var right = document.getElementById("serve").offsetHeight;
// 获得内部三栏中ID = serve的div高度
var middle = document.getElementById("content").offsetHeight;
// 获得内部三栏中ID = content的div高度
var height = 0;
// 定义变量来储存最大值
height = left - right > 0 ? left : right;
// 数值比较
height = middle - height > 0 ? middle : height;
// 数值比较
main.style.height = height + "px";
// 设定外框div的高度为 得出的最大高度
}
</script>
</head>
<body>
<div id="model">
<div id="header">
<h1>网页标题</h1>
<h2>网页副标题</h2>
</div>
<div id="main">
<div id="content">
<h3>主信息区域</h3>
<p>正文内容</p>
<p>正文内容</p>
</div>
<div id="subplot">
<h3>次信息区域</h3>
<p>正文内容</p>
</div>
<div id="serve">
<dl>
<dt>功能服务区域</dt>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
</dl>
</div>
</div>
<div id="footer">
<p>版权信息区域</p>
</div>
</div>
</body>
</html>
伪列布局.png
提示：在使用这种方法时，一定要确保页面宽度是固定的且与背景图的宽度一只，不能够设计为弹性页面（百分比宽度），或宽度值为auto；
方法二：补白padding边界margin重叠法
这种设计方法的思想是设计三列栏目的底部不带为无穷大，这样在有限的窗口内都能够显示栏目的背景色，因此也就不用担心栏目高度无法自适应。然后为了避免补白过大产生的空白区域，在设计底部边界为负无穷大，从而覆盖掉多出来的补白区域，最后再在中间行包含框中定义overflow:hidden;声明剪切到多出的区域即可。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设计多栏高度自适应页面_补白边界重叠法</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body { text-align: center; }
#model {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#header { background: #FF00FF; }
#main {
position: relative;
width: 100%;
border:1px solid black;
overflow:hidden;/*在父元素添加 溢出隐藏 就可以隐藏超出的背景图了*/
}
#content { /*此包含框会随着内容的增加而增加*/
margin-left: 25%;
margin-right: 20%;
padding-bottom: 9999px;
margin-bottom: -9999px;
background:#fc0;
}
#subplot {/*此包含框虽然也会随着内容的增加而增加，但因为定义了绝对定位，脱离了文档流，所以高度的增加不会影响父元素的高度，
所以看不到效果。但父元素设 置 overflow：hidden；后可以对所有超出父元素的子元素进行隐藏（不管是否脱离文档流）*/
width: 20%;
position: absolute;
right: 0;
top: 0;
border:1px solid red;
padding-bottom: 9999px;
margin-bottom: -9999px;
background:#0cc;
}
#serve {/*此包含框虽然也会随着内容的增加而增加，但因为定义了绝对定位，脱离了文档流，所以高度的增加不会影响父元素的高度，
所以看不到效果。但父元素设置 overflow：hidden；后可以对所有超出父元素的子元素进行隐藏（不管是否脱离文档流）*/
width: 25%;
position: absolute;
left: 0;
top: 0;
border:1px solid green;
padding-bottom: 9999px;
margin-bottom: -9999px;
background:#9cf;
}
#footer {
background: #FF99FF;
}
</style>
</head>
<body>
<div id="model">
<div id="header">
<h1>网页标题</h1>
<h2>网页副标题</h2>
</div>
<div id="main">
<div id="content">
<h3>主信息区域</h3>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
</div>
<div id="subplot">
<h3>次信息区域</h3>
<p>正文内容</p>
</div>
<div id="serve">
<dl>
<dt>功能服务区域</dt>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
</dl>
</div>
</div>
<div id="footer">
<p>版权信息区域</p>
</div>
</div>
</body>
</html>
浏览器效果截图：
边界补白重叠法.png
但是这种方法只能够根据中间栏目的高度来裁切，也就是说overflow:hidden;声明对于流动或浮动元素有效，对于脱离文档流的绝对定位元素来说无法进行裁切，从而导致如果绝对定位的栏目高度高出中间流动布局栏目的高度时，就会被裁切掉。
为了避免此类问题发生，不能使用定位法布局页面，应用简单的浮动发进行设计，改动的核心样式如下（方法三），这样就可以实现上述3列自适应高度的版式效果。
方法三(绝对定位改浮动)：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设计多栏高度自适应页面_补白边界重叠法_绝对定位改浮动</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body { text-align:center; }
#model {
width:800px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#header { background:#FF00FF; }
#main {
position:relative;
width:100%;
overflow:hidden
}
#content {
float:left;
width:55%;
background:#FFCC00;
}
#subplot {
width:20%;
float:left;
background:#00CCCC;
}
#serve {
width:25%;
float:right;
background:#99CCFF;
}
#content, #subplot, #serve {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
#footer { background:#FF99FF; }
</style>
</head>
<body>
<div id="model">
<div id="header">
<h1>网页标题</h1>
<h2>网页副标题</h2>
</div>
<div id="main">
<div id="content">
<h3>主信息区域</h3>
<p>正文内容</p>
<p>正文内容</p>
</div>
<div id="subplot">
<h3>次信息区域</h3>
<p>正文内容</p>
</div>
<div id="serve">
<dl>
<dt>功能服务区域</dt>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
<dd>服务列表项</dd>
</dl>
</div>
</div>
<div id="footer">
<p>版权信息区域</p>
</div>
</div>
</body>
</html>
浏览器效果图：
绝对定位改浮动.png
声明：此文只代表个人见解，只供参考！联系QQ：1522025433
