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 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
bootstrap confirmation按钮提示组件使用详解
Aug 22 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
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
php实现源代码加密的方法
2015/07/11 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
拖拉表格的JS函数
2008/11/20 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
Json解析的方法小结
2016/06/22 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python with statement 进行文件操作指南
2014/08/22 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python