要实现两列高度自适应方法有很多，一种直接使用css方法，另一种是利用js或jquery来控制它们进行高度自适应，下面我分别介绍一下。
方法一：
纯CSS实现高度自适应：
代码如下
复制代码
.content{ overflow:hidden; }
.left, .center, .right{ padding-bottom:500px; margin-bottom:-500px;}
方法二：
以下JS代码添加到</body>结束之前：
代码如下
复制代码
<script type=”text/javascript”>
<!–
var l=document.getElementById(“left_side”).scrollHeight;
var r=document.getElementById(“right_main”).scrollHeight
if (r>l)
{
document.getElementById(“left_side”).style.height=document.getElementById(“right_main”).scrollHeight+”px”;
}
else
{
document.getElementById(“left_side”).style.height=document.getElementById(“right_main”).scrollHeight+”px”;
}
–>
</script>
最后，CSS还得加上这个：
html,body{ height:100%;}
方法三，
三行两列高度自适应
代码如下
复制代码
<style type="text/css">
body{ margin:0; background:#f5f5f5;}
.Header{ width:600px; margin:auto; background:green; height:80px;}
.Mian{ width:600px; margin-left:auto; margin-right:auto;}
.Mianbg{ width:600px; background:#CC9999; float:left;}
.left{ width:300px; background:#336666; float:left;}
.right{ width:300px; background:#FF9966; float:right;}
.right_content{ width:200px; background:#666633; margin-left:auto; margin-right:auto; height:50px; margin-top:5px;}
.Footer{ margin:auto; width:600px; background:#666699; clear:both; height:80px;}
</style>
<title>css</title>
</head>
<body>
<div class="Header">Header</div>
<div class="Mian">
<div class="Mianbg">
<div class="left"> Left</div>
<div class="right">
<div class="right_content">Right Content</div>
<div class="right_content">Right Content</div>
<div class="right_content">Right Content</div>
<div class="right_content">Right Content</div>
</div>
</div>
</div>
<div class="Footer">Footer</div>
效果图如下
