分类目录

链接

2012 年 12 月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

近期文章

热门标签

新人福利,免费薅羊毛

现在位置:    首页 > 前端 > 正文
DIV高度自适应方法
前端 暂无评论 阅读(1,860)

网站优化(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下测试。

但如果是用JQUERY写同样的功能,兼容所有浏览器了~

JQ方法如果要的话,请留言~嘿嘿

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;}

============ 欢迎各位老板打赏~ ===========

本文版权归Bruce's Blog所有,转载引用请完整注明以下信息:
本文作者:Bruce
本文地址:DIV高度自适应方法 | Bruce's Blog

发表评论

留言无头像?