源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery实现布局高宽自适应的简单实例

  • 时间:2021-06-24 23:56 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery实现布局高宽自适应的简单实例
在页面布局(layout)时经常是上左右的框架布局并且需要宽、高度的自适应,div+css是无法实现(*hegz: div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要js来辅助。 主要通过 jQuery.resize() 这个方法,也就是当窗口大小改变时重新计算布局的高宽。其它直接看代码即可。 [b]Html代码[/b]
<div id="header"></div> 
<div id="left"></div> 
<div id="right"></div> 
[b]Js代码[/b]
$(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实现布局高宽自适应的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部