实现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>