jQuery实现布局高宽自适应的简单实例
时间:2021-06-17 09:16:31|栏目:jquery|点击: 次
在页面布局(layout)时经常是上左右的框架布局并且需要宽、高度的自适应,div+css是无法实现(*hegz: div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要js来辅助。
主要通过 jQuery.resize() 这个方法,也就是当窗口大小改变时重新计算布局的高宽。其它直接看代码即可。
Html代码
<div id="header"></div> <div id="left"></div> <div id="right"></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
下一篇:jquery实现动态添加附件功能
本文标题:jQuery实现布局高宽自适应的简单实例
本文地址:http://www.codeinn.net/misctech/143180.html