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

自适应

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

    / 分类: 开发 / No Comments

    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"