JQuery实现左右两栏等高的方法

固定地址:http://www.usity.org/?p=2146

JQuery实现左右两栏等高的方法

使用场景:常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白,有时需要让右边的高度和左边的保持一 致。一般解决的办法是用背景填充来模拟。现在有了个更简单的方法。

原理:事先通过正内边距来使其拥有足够 高度,然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏,我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度,从而实现了等高。简单的讲就是取得左右两边的高度,然后判断这个值,把大的值赋给小的。

代码:

左列的Class是left,右侧的Class是right

$(document).ready(function() {
    var _leftheight = $(".left").height();
        _rightheight = $(".right").height();
        if(_leftheight > _rightheight ) {
            $(".right").height(_leftheight);
        }
        else {
            $(".left").height(_rightheight);
        }
    })

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

使用新浪微博登陆