下面小编就为大家带来一篇jQuery实现布局高宽自适应的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在页面布局（layout）时经常是上左右的框架布局并且需要宽、高度的自适应，div+css是无法实现（*hegz： div+css其实是可以实现的，利用jQuery比较容易实现浏览器的兼容性），所以需要js来辅助。
主要通过 jQuery.resize() 这个方法，也就是当窗口大小改变时重新计算布局的高宽。其它直接看代码即可。
Html代码
<div></div> <div></div> <div></div>
Js代码
$(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); }
以上这篇jQuery实现布局高宽自适应的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: