网页中垂直的三栏自适应等高布局设计方法，很实用的css代码，在需要用到等高效果的时候可以参照这里的例子。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>网页三栏布局自适应等高效果_武鸣人</title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
font-size: 22px;
text-align: center;
}
#header,#footer{
width: 960px;
background-color: #666;
height: 50px;
line-height: 50px;
margin: 0 auto;
}
#footer{
clear: both;
}
#container{
position: relative;
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#container .column{
position: relative;
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
#main{
float: left;
background-color: #e5e5e5;
width: 500px;
left: 300px;
}
#left{
float: left;
background-color: #7bd;
width: 300px;
left: -500px;
}
#right{
float: right;
background-color: #f63;
width: 160px;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="header">#header</div>
<div id="container">
<div id="main" class="column">#main<br>武鸣人<br>https://www.wuming.ren</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处