当前位置:首页 > DIV+CSS实例 > 正文

保持三列div布局的高度相同的方法

作者:stjacob 来源:我就是一道弧 【 】 浏览: 添加日期:2008-06-30 我要评论(4)     

对自己的三栏css进行修改。发现中右两栏的高度无法与左边的日志栏自动适应。日志栏由于日志的数量会变动。但如果日志栏高度低的话,又无法与中右栏高度一致。上网找了下,有一种利用overflow属性把多个div(这些div都设置了超长的高度或者宽度)进行平整,效果不太好。似乎纯粹css无法做到div高度自适应。

这里有个方法:

假设有div1,div2,div3(三个子div,不管哪个栏变动)。在加载页面里三个子div声明结束后(要在父div的结构里),加上:

<script type="text/javascript">

var a=Math.max(document.getElementById("div1").offsetHeight,document.getElementById("div2").offsetHeight,document.getElementById("div3").offsetHeight);

document.getElementById("div1").style.height = a + "px";

document.getElementById("div2").style.height = a + "px";

document.getElementById("div3").style.height = a + "px";
</script>  

 就是比较三个栏的高度大小,取出最大值。然后全部赋值为最高的。
 

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS实例〗Tags: 三列div布局 div高度相同

更多评论(4)..会员评论

走在路上(222.212.*.*) 发表于:2010-01-28 15:49:38
我做了 ,没有成功,真希望有一个实例。
管理员回复:这种方法虽然可以实现,但不建议这样用
Guest(221.213.*.*) 发表于:2009-12-24 16:15:06
试一下,不行啊!
过期作废(202.104.*.*) 发表于:2009-07-02 10:34:12
有实例吗,正要这种效果,谢谢
管理员回复:方法有了,你按照方法一做不就是实例了
yangguang(61.51.*.*) 发表于:2009-05-22 18:16:35
sorry ,you are wrong

出差旅游免费预订酒店

【视频教程】新手常见问题