在页面布局(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. tomcat多域名配置(转)

    TOMCAT的域名配置 现在很多的公司的网站都是用tomcat作为应用服务区的,可是对于初学者,8080端口号是如何去掉的,这些网站是如何和域名绑定到一起的呢?一个 tomcat是如何绑定多域名?并且 ...

  2. 【Android】5.6 弹出菜单(PopUp Menus)

    分类:C#.Android.VS2015: 创建日期:2016-02-07 一.简介 功能描述:用户单击按钮弹出菜单.当用户选择一个菜单项,会触发MenuItemClick事件并让弹出的菜单消失:如果 ...

  3. [phpcms v9]自定义表单添加验证码验证功能

    修改  \phpcms\templates\default\formguide\show.html 中添加验证码显示 <input type="text" id=" ...

  4. Facebook提出DensePose数据集和网络架构:可实现实时的人体姿态估计

    https://baijiahao.baidu.com/s?id=1591987712899539583 选自arXiv 作者:Rza Alp Güler, Natalia Neverova, Ias ...

  5. nginx学习之epoll

    https://blog.csdn.net/mmshixing/article/details/51848673 首先说一下传统的I/O多路复用select和poll,对比一下和epoll之间的区别: ...

  6. 全库搜索某个内容的sql

    DECLARE @what varchar(800) SET @what='联系' --要搜索的字符串 DECLARE @sql varchar(8000) DECLARE TableCursor C ...

  7. Oracle PLSQL Demo - 31.执行动态SQL拿一个返回值

    DECLARE v_sql ) := ''; v_count NUMBER; BEGIN v_sql := v_sql || 'select count(1) from scott.emp t'; E ...

  8. ES6新特性概览1

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  9. 重装Ubuntu系统

    1.安装JDK参考:http://weixiaolu.iteye.com/blog/1401786jdk-6u31-linux-i586.bin莫名奇妙的安装失败.所以下载了jdk-7u45-linu ...

  10. Oracle数据库字符集问题解析

    Oracle数据库字符集问题解析 经常看到一些朋友问ORACLE字符集方面的问题,我想以迭代的方式来介绍一下.第一次迭代:掌握字符集方面的基本概念.有些朋友可能会认为这是多此一举,但实际上正是由于对相 ...