首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery兑现布局高宽自适应

2012-11-09 
jQuery实现布局高宽自适应在页面布局(layout)时经常是上左右的框架布局并且需要宽、高度的自适应,div+css是

jQuery实现布局高宽自适应

在页面布局(layout)时经常是上左右的框架布局并且需要宽、高度的自适应,div+css是无法实现(*hegz:div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要js来辅助。

?

主要通过 jQuery.resize() 这个方法,也就是当窗口大小改变时重新计算布局的高宽。其它直接看代码即可。

?

<div id="header"></div><div id="left"></div><div id="right"></div>
?

?

$(document).ready(function() {initLayout();$(window).resize(function(){initLayout();});});function initLayout() {$('#right').width(document.documentElement.clientWidth - $("#left").width()-2);var h = document.documentElement.clientHeight - $("#header").height()-5;$('#left').height(h);$('#right').height(h);}

?

?

Demo:http://www.coderhome.net/demo/f.html

?

文章来源:http://www.coderhome.net/zifa/archives/618

?

?

热点排行