飘易博客(作者:Flymorn)
订阅《飘易博客》RSS,第一时间查看最新文章!
飘易首页 | 留言本 | 关于我 | 订阅Feed

让并排的两个Div自适应高度(一样高)

Author:flymorn Source:飘易博客
Categories:网站设计 PostTime:2007-11-27 11:10:31
正 文:
    由于设计页面需要,要把两个并排显示的div实现一样高的效果,n行n列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标。方法有以下几种:1、JS实现(判断2个div高);2、纯css方法;3、加背景图片实现。首先说下本博客实现的2个div一样高的方法(即js方法)。

    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下通过,考虑绝大数人仍然用的是IE,所以并没有在opera和firefoxs下调试,哪位用的是opera或ff,可以帮忙看看飘易博客的DIV是否保持了一致的高度。)

    2、纯CSS方法

    css里代码(调试通过,但不会显示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;}

     还有其他的一些方法,但主流就是这几种了。如果你还有关于多个div自适应高度的好的代码,请给我们留言,欢迎与我们讨论。
作者:flymorn
来源:飘易博客
版权所有。转载时必须以链接形式注明作者和原始出处及本声明。
上一篇:安装AutoCAD2007时找不到dfst.dll,这是病毒!
下一篇:Google的搜索结果里的猫腻
3条评论 “让并排的两个Div自适应高度(一样高)”
2007-12-17 2:04:44
第一个例子中要是其中出现padding ,marging后就会产生偏差.
2 Flymorn
2007-12-17 21:35:14
To yufeixuan:不会呀,这个博客的左右div都采用了padding,margin属性,但并没有发现变形。
3 xml
2013-3-16 8:59:50
你好,请教
 2、纯CSS方法
看的不时很明白,能否写的详细些,我有两个div, id= navebar ,id = content;
如设设置CSS, 谢谢!!!
发表评论
名称(*必填)
邮件(选填)
网站(选填)

记住我,下次回复时不用重新输入个人信息
© 2007-2010 飘易博客 Www.Piaoyi.Org 原创文章版权由飘易所有 渝ICP备07006361号