在页面布局(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. asp mvc @Html.CheckBox("sel",true) 往后台传值问题

    @Html.CheckBox("sel",true) 生成2个输入,而不是一个,这是为什么呢? <input checked="checked" id=& ...

  2. AP_应付模组在月结的处理

    2014-06-04 Created By BaoXinjian 1. 完成所有交易及检查Interface      (1). Invoice and Credits      (2). Prepa ...

  3. 【Oracle错误集锦】:ORA-12154: TNS: 无法解析指定的连接标识符

    相信这个错误大家都不陌生,仅仅要安装使用过Oracle的预计都遇到过这个问题,一般出如今用PL/SQL连接Oracle数据库的时候发生的. 导致这个错误的原因以及解决方式都是多种多样的,我也是三番五次 ...

  4. SqlMapConfig.xml中的setting属性 Ibatis mybatis

    <settingscacheModelsEnabled="true"lazyLoadingEnabled="false"enhancementEnable ...

  5. 零基础学python》(第二版)

    ---恢复内容开始--- 零基础学python>(第二版) python学习手册 可以离线下载,  .chn格式, 插入小幽默笑话,在学习累的时候看看笑话 放松一下 欢迎下载转载,请注明出处,谢 ...

  6. win10环境配置react

    1 react 需要nodejs所以需要安装nodejs环境,到nodejs官网下载 现在默认会安装nodejs 和 npm包 和 配置环境 2 检查是否安装成功,在命令行中输入 显示成功则正确 3 ...

  7. C 指向指针的指针

    #include <stdio.h> int main() { char *cBooks[] = { "C程序设计语言", "C专家编程", &qu ...

  8. css 样式使用方法的累积

    我们直接看样例然后在来解释使用方法. <!DOCTYPE html> <html> <head> <style> input[type="ch ...

  9. [转载] C++的那些事:你真的了解引用吗

    我转载了roony的一篇文章 C++的那些事:你真的了解引用吗 以备以后可以查到. 一.引用的本质是什么 说到引用,一般C++的教材中都是这么定义的: 1.引用就是一个对象的别名. 2.引用不是值不占 ...

  10. Java 如何实现线程间通信

    正常情况下,每个子线程完成各自的任务就可以结束了.不过有的时候,我们希望多个线程协同工作来完成某个任务,这时就涉及到了线程间通信了. 本文涉及到的知识点: thread.join(), object. ...