专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

js 解决两列、三栏div等高(自适应高度)

var l=document.getElementById("left").scrollHeight;   
var r=document.getElementById("right").scrollHeight   
if (r>l) {   
    document.getElementById("left").style.height=document.getElementById("right").scrollHeight+"px";   
} else {   
    document.getElementById("right").style.height=document.getElementById("left").scrollHeight+"px";   
}

网上的div等高方法大致有五种(无非就是利用js或者css),这个算是js方法一种的完善,无论left或是right高时,都可以实现自适应高度。而且就算遇到left或right里面有其他元素影响时,也可以通过在+"px"; 前面加上加减乘除来达到满意的效果,例,可写成:+5+"px"。

下面是三栏等高:

var l=document.getElementById("left").scrollHeight 
var m=document.getElementById("middle").scrollHeight 
var r=document.getElementById("right").scrollHeight 
layoutHeight=Math.max(l,m,r) 
document.getElementById("left").style.height=layoutHeight+"px" 
document.getElementById("right").style.height=layoutHeight+"px" 
document.getElementById("middle").style.height=layoutHeight+"px" 

/ 分类: 开发 / TrackBackhttps://xhl.me/archives/642/trackback标签: 自适应, javascript

添加新评论 »