This project is read-only.

两个并排显示的div实现一样高的效果 (转http://blog.csdn.net/webyjh/article/details/4203107)

Jun 27, 2013 at 12:29 PM
.
分类: div+css2009-05-20 10:18990人阅读评论(0)收藏举报

divcssxhtmlfloatopera优化
     网站优化(seo)中,提到过网站样式的优化,即在网站的布局设计中,采用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;}