在页面布局(layout)时经常是上左右的框架布局并且需要宽、高度的自适应,div+css是无法实现(*hegz:div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要js来辅助。

主要通过 jQuery.resize() 这个方法,也就是当窗口大小改变时重新计算布局的高宽。其它直接看代码即可。

HTML-code

<div id="header"></div>
<div id="left"></div>
<div id="right"></div>

JS-code

$(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实现布局高宽自适应的更多相关文章

  1. 关于Google圆角高光高宽自适应按钮及其拓展

    关于Google圆角高光高宽自适应按钮及其拓展————源自张鑫旭css讲解 这篇文章发布于 2009年10月24日,星期六,18:08,归类于 css相关. 阅读 48770 次, 今日 1 次 by ...

  2. LayIM聊天框全屏根据浏览器高宽自适应

    个人博客 地址:http://www.wenhaofan.com/article/20190410190628 问题 由于LayIM没有处理聊天框在全屏状态下根据浏览器缩放处理高宽,所以会导致在浏览器 ...

  3. 关于Google 圆角 高光 高宽 自适应 按钮

    最近看了张鑫旭老师关于Google搜索按钮的博客,感觉启示颇多.下面我就详说一下这个按钮的代码,由于W3C新版本的更新,之前的代码会有部分累赘, 在此,我做了些修改.当然,想观摩原版的可以,狠狠的戳链 ...

  4. 纯CSS写九宫格样式,高宽自适应正方形

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  5. jquery 获取各种高宽

    获取浏览器显示区域(可视区域)的高度 :   $(window).height();   获取浏览器显示区域(可视区域)的宽度 : $(window).width();   获取页面的文档高度   $ ...

  6. JQuery 实现两列等高并自适应高度

    想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() ...

  7. UILabel实现自适应高宽

    UILabel是iOS开发常用的控件.UILabel的属性需要了解,UILabel的特殊显示效果也需要我们掌握.UILabel自适应高宽度是很多初学者遇到的技术性难题.比如段文字,要让他完全地分行显示 ...

  8. Android如何在初始化的时候获取加载的布局的宽高

    在自定义ListView中,需要将下拉刷新的View在初始化的时候设置padding隐藏起来,这时就要在初始化的时候获得要加载的布局View的高度. private View headView; he ...

  9. iOS开发 UILabel实现自适应高宽

    UILabel是iOS开发常用的控件.UILabel的属性需要了解,UILabel的特殊显示效果也需要我们掌握.UILabel自适应高宽度是很多初学者遇到的技术性难题.比如段文字,要让他完全地分行显示 ...

随机推荐

  1. HDU 3849 By Recognizing These Guys, We Find Social Networks Useful(双连通)

    HDU 3849 By Recognizing These Guys, We Find Social Networks Useful pid=3849" target="_blan ...

  2. Tree通用的系列方法列表-treepanel

    在项目中经常会用到Tree来显示数据进行操作.今天整理出来一系列操作Tree的方法.可供项目中方便调用.不用重复写代码,快速应用,通用性很强. Tree系列方法列表如下:主要针对的是ext.net中的 ...

  3. MySQL查看SQL语句执行效率(转)

    Explain命令在解决数据库性能上是第一推荐使用命令,大部分的性能问题可以通过此命令来简单的解决,Explain可以用来查看 SQL 语句的执行效 果,可以帮助选择更好的索引和优化查询语句,写出更好 ...

  4. es6编写generator报错

    首先babel基础包(不安装额外东西)并不是支持完整的es6语言 自己写的如下代码 let generator = function* () { ; ,,]; ; }; var gen = gener ...

  5. 多主机共享ssh Public/Private Key

    前期服务器比较少,所有代码都放在github的私库中,在自己的github 设置中设置SSH keys就可以拉下相应的库中的代码到本地与服务器了,但是最近服务器多家了几台,每台都生成key加到gith ...

  6. ps可选颜色

    RGB模式和CMYK模式 青色加红色是黑色->颜料,而蓝色绿色(它们合起来是青色)加红色却是白色->加光 可调整的原色(主色)可调整的主色分为三组RGB三原色:红色.绿色.蓝色CMY三原色 ...

  7. 什么是GC Roots

    GC Root 2012年11月28日  ⁄ 综合 ⁄ 共 625字 ⁄ 字号  小 中 大  ⁄ 评论关闭   常说的GC(Garbage Collector) roots,特指的是垃圾收集器(Ga ...

  8. nyoj311 完全背包 经典背包问题

    完全背包 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 直接说题意,完全背包定义有N种物品和一个容量为V的背包,每种物品都有无限件可用.第i种物品的体积是c,价值是w. ...

  9. 【Java】代理模式,静态代理和动态代理(基于JDK或CGLib)

    当我们需要在一个方法之前或之后添加一段逻辑时,自然会想到使用代理类.代理类帮我们代理了实际类的调用,然后可以在实际调用之前和之后添加一些逻辑,从而不浸入实际类. 拓展:由于代理类能在实际类调用之前和之 ...

  10. 常用的兼容IE和火狐FF等浏览器的js方法(js中ie和火狐的一些差别)

    介绍了网页上常用的IE/火狐兼容性该页的做法,并给出了代码,相当实用了.为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefo ...