详细内容
当前位置 首页 >> CSS >> CSS技术 >> 正文
设置两个div高度一致的办法
发布日期:2010-06-23     点击:4700     字体:[ ]

       网站的布局设计,通常采用采用DIV+CSS。网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度(事先并不能确定哪列的高度)的相同,目前主要有以下三种方法:
       1、JS实现(判断2个div高);
       2、纯css方法;
       3、加背景图片实现。

    div+css基本布局:

<div id="mm">
<div id="mm1"></div>
<div id="mm2"></div>
</div>

    1、js实现div自适应高度

代码如下:
<script type="text/javascript">
<!--
window.onload=window.onresize=function(){
if(document.getElementById("mm2").clientHeight<document.getElementById("mm1").clientHeight){
document.getElementById("mm2").style.height=document.getElementById("mm1").offsetHeight+"px";
}
else{
document.getElementById("mm1").style.height=document.getElementById("mm2").offsetHeight+"px";
}
}
-->
</script>

    说明:上面的代码在IE6.0/IE7.0下通过,并没有在opera和firefoxs下测试

    2、纯CSS方法

    css里代码(IE下测试通过,但不会显示div下边框,即border-bottom):

/*左右自适应相同高度start*/
#m1,#m2
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#m1,#m2
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#m1:before, #m2:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/*左右自适应相同高度end*/

    3、加背景图片

    这个方法,很多大网站在使用,如163,sina等。

    XHTML代码:

<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>

    CSS代码:

#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}

用户评论
昵称:匿名 来自:221.221.176.*  
2012/8/26 15:58:03
12312313
昵称 
内容  *
验证码   
   
相关文章 更多...  
Copyright © 2010 zdbase.com All Rights Reserved. 苏ICP备15039389号 可人软件设计