在页面布局(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. C++:借助tinyxml2读取XML文件

    // XMLT01.cpp : 定义控制台应用程序的入口点.//#include "stdafx.h"#include <iostream>#include " ...

  2. OAF_OAF控件系列8 - SubTab的实现(案例)

    2014-06-02 Created By BaoXinjian

  3. Linux vm运行参数 - overcommit相关的参数

    一.前言 终于可以进入Linux kernel内存管理的世界了,但是从哪里入手是一个问题,当面对一个复杂系统的时候,有时候不知道怎么开始.遵守“一切以人为本”的原则,我最终选择先从从userspace ...

  4. System V 消息队列 - 复用消息

    消息队列中的消息结构可以由我们自由定义,具备较强的灵活性.通过消息结构可以共享一个队列,进行消息复用.通常定义一个类似如下的消息结构: #define MSGMAXDAT 1024 struct my ...

  5. Accelerated C++学习笔记7—&lt;使用库算法&gt;

    第6章  使用库算法 本章中主要教我们怎样使用几个库算法来解决与处理字符串和学生成绩相关的问题. 1.分析字符串 使用一个循环来连接两幅字符图案 <span style="font-f ...

  6. springboot admin

    转 Spring Boot Admin的使用 作者 杜琪 关注 2015.12.25 17:30* 字数 1803 阅读 16569评论 21喜欢 55 上一篇文章中了解了Spring Boot提供的 ...

  7. man手册查找ascii码和运算符优先级

    1.man手册可以输出ascii码表 man   ascii 2.man手册还可以输出运算符的优先级 man operator

  8. 给openvpn客户分配固定ip地址

    虽然openvpn提供dhcp服务,但是dhcp是有租约的,到期后会重新分配ip,造成连接中断的问题,所以最好还是给客户端固定一个ip. 思路:开启客户端配置目录,然后为每一个客户建一个配置文件,里面 ...

  9. 判断js对象是否拥有某一个属性的js代码

    js对象是否拥有某一个属性的判断方法有很多. 本文分享一个简单的方法,如下: <script> /** * 判断js对象是否具有某属性 * by www.jbxue.com */ var ...

  10. PHP函数之类

    if(isset($_POST['dosubmit'])) { } 打散 $array_urls = explode("\r\n",$inurl_str); foreach ($a ...