由于设计页面需要,要把两个并排显示的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";
}
}
-->
</scri
pt>
(注:网上公布了不少方法,但代码或多或少有错;上面的是无错代码;我测试在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自适应高度的好的代码,请给我们留言,欢迎与我们讨论。
分享到:
相关推荐
如何用js加css控制div自适应高度问题完美解决方法
div+CSS自适应高度,需要的朋友请下载
初学者div+css:Tab页自适应,简单易上手
用JS+CSS来实现DIV层自适应高度,无论你的浏览器大小如何变化都会自适应高度, 调节宽度同样的道理
css边框背景阴影 DIV自适应宽度 背景色渐变、透明 多行自适应浏览器高度 圆角div 固定高度div,随内容自动变高css定义方法等等
在DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题,本文将介绍左右自适应高度一致的Jquery与DIV高度自适应屏幕的js
div+css高度自适应div+css高度自适应div+css高度自适应div+css高度自适应
div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight
当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。
Div即父容器不根据内容自适应高度,我们看下面的代码: 复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好...
<div class=A> 头部DIV </div> <div class=B>下部DIV </div> </div> CSS: html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; ...
最近做前端设计时需要使左右两个DIV高度自适应。这其中的jquery代码中的获得高度用的clientHeight,介绍一下几种不同的获得方式以及他们的差别
最小高度能自适应高度IE.FF全兼容的div设置
脚本控制DIV三行三列布局自适应高度
div的高度是0,不能随图片的高度变化,那么div如何才能够自适应高度呢?下面有个不错的方法,大家可以尝试下
IE6、IE7、FF下DIV自适应高度
怎样让一个div高度自适应浏览器高度在应用中很常见,感兴趣的朋友可以参考下哈,希望对你有所帮助