在页面布局(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. 跨域在嵌入页面iframe中设置cookie

    在IIS  HTTP响应头 中 添加: 名称:p3p 值:CP="IDC DSP COR CURa ADMa OUR IND PHY ONL COM STA"

  2. ASP.NET CORE 学习之自定义异常处理

    为什么异常处理选择中间件? 传统的ASP.NET可以采用异常过滤器的方式处理异常,在ASP.NET CORE中,是以多个中间件连接而成的管道形式处理请求的,不过常用的五大过滤器得以保留,同样可以采用异 ...

  3. linux下core dump

    1.前言 一直在从事linux下后台开发,经常与core文件打交道.还记得刚开始从事linux下开发时,程序突然崩溃了,也没有任何日志.我不知所措,同事叫我看看core,我却问什么是core,怎么看. ...

  4. C 指针使用误区

    /** *错误给指针赋常量 *知识点:指针存储内存地址 **/ #include <stdio.h>void main(){ //int *p_int = 123; //错误,不能直接给指 ...

  5. Spring Hello World

    1. 概述 Spring 框架是一个开源的 Java 平台,它最初是由 Rod Johnson 编写的,并且于 2003 年 6 月首次在 Apache 2.0 许可下发布. 1.1 依赖注入 1.2 ...

  6. Modelsim编译Xilinx器件库的另一种方法

    由 xooo 于 星期五, 09/18/2015 - 15:35 发表 以前在用modelsim对Xilinx进行器件库编译时,我用的比较多的是直接在ISE中编译器件库,感觉很方便简单,就是编译时间有 ...

  7. Xcode真机调试报错:The application could not be verified.

    今天真机调试的时候遇到这个错误: The application could not be verified. 这还是第一次遇到,应该是手机上的app的证书跟如今的证书不一致导致. 解决方法有两个 x ...

  8. angular学习笔记(二十五)-$http(3)-转换请求和响应格式

    本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({ transfo ...

  9. ubuntu图形界面调出命令行

    新安装的ubuntu12.04在左边的快捷方式里默认是没有终端图标的,可以使用如下方法打开终端: 使用ctrl+alt+t.这个组合键适合ubuntu的各种版本.但是,在使用KVM虚拟机时可能会出现问 ...

  10. iOS开发-模拟器的小常识

    /* 补充: 让模拟器锁屏: command + l */ 让模拟器变大变小 打开Xcode模拟器,选择Window->Scale->