实现div两列等高

html:

<div id="header">头部</div>
<div id ="container">
    <div class="mainbox">主内容区域</div>
    <div class="sidebox">侧边栏</div>
</div>
<div id="footer">页脚</div>

1. 背景模拟：背景模拟主要依靠一张图片，然后将其平铺，使页面在视觉上，产生等高效果；

2. 负边距实现等高；

<style type="text/css">

 *{ margin:0; padding:0;}

#header,#footer{ width:960px; height:30px; background-color:#E8E8E8;}

#container{ width:960px; overflow:hidden;/重点！将父级元素多余部分切除掉/ margin:10px 0;}

.mainbox{ float:left; width:650px; background-color:#333333;}

.sidebox{ float:right; width:280px; background-color:#AAAAAA;}

.mainbox,.sidebox{ padding:0 5px; color:#FF0000; margin-bottom:-9999px;/*将容器背景色拉伸*/ padding-bottom:9999px;/*将容器背景色拉伸*/}

#container:after{ display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:"";}

</style>

3. 使用border实现等高；

<style type="text/css">

 *{ margin:0; padding:0;}

#header,#footer{ width:970px; height:30px; background-color:#9CF;}

#container{ position:relative;/*将子元素的定位到具体的参照对象*/ width:970px; margin:10px 0;}

.mainbox{ width:650px; background-color:#FC9; border-right:320px solid #F63;/*设置左边框宽度为320px像素，同等于sidebox的宽度*/}

.sidebox{ width:320px; position:absolute; top:0; right:0;/*使元素靠右*/}

</style>

4. 使用JavaScript实现等高 ；

<script type="text/javascript"> mh = document.getElementById('mainbox');sh = document.getElementById('sidebox'); if(mh.clientHeight < sh.clientHeight){ mh.style.height = sh .clientHeight + "px";}else{ sh.style.height = mh.clientHeight + "px";}</script>