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


Posted in Javascript onMay 28, 2016

在页面布局(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实现布局高宽自适应的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现的向下图文信息滚动效果
May 03 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
js实现表格筛选功能
Jan 18 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 Javascript
jquery mobile界面数据刷新的实现方法
May 28 #Javascript
jquery自适应布局的简单实例
May 28 #Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 #Javascript
jquery div模态窗口的简单实例
May 28 #Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 #Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 #Javascript
js弹出窗口返回值的简单实例
May 28 #Javascript
You might like
给ECShop添加最新评论
2015/01/07 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
node网页分段渲染详解
2016/09/05 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
js中的闭包学习心得
2018/02/06 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python中的异常处理学习笔记
2015/01/28 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
Python制作动态字符图的实例
2019/01/27 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
办公室主任职责范本
2014/03/07 职场文书
技术比武方案
2014/05/19 职场文书
优秀党员先进材料
2014/12/18 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
Pandas 数据编码的十种方法
2022/04/20 Python