jquery做的三列div高度自适应

发现小站的两列div的高度不一致,首页变形了,研究了一下jquery设置div的高度,

弄了个div高度自适应的jquery的简单代码,设置两个div的高度一致,保持网站的漂亮程度

首先引用jquery库

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script>

然后调用代码

<script type=”text/javascript”>

//关键代码 page高度自适应

<!–

function SetSameHeight(div-id1,div-id2,div-id3)//三个div的id,定义的函数

{

var h1 = $(div-id1).outerHeight(); //获取对象1的高度

var h2 = $(div-id2).outerHeight(); //获取对象2高度

var h3 = $(div-id3).outerHeight(); //获取对象3高度

var mh = Math.max( h1, h2, h3); //比较一下

$(div-id1).height(mh); //对对象的高度赋最大值  这里的哪一个不一致可以mh+数字进行调整

$(div-id2).height(mh);  //对对象的高度赋最大值

$(div-id3).height(mh);  //对对象的高度赋最大值

}

$(window).load(function($) { //在所有页面加载完成后执行定义的函数代码

SetSameHeight(“#content”,”#sidebar”,”#page”); //”#content”,”#sidebar”,”#page”分别为个div的id

});–>

</script>

现在安装到你的网站上进行一下预览吧!!

 » 本站地址:http://www.gomoth.com

标签: , ,