这个问题，已经别扭我多年了，今天终于彻底解决了，拿出来庆贺一下。jquery作为开源项目，无论从思路上，还是从严谨性上，让人崇敬。

随着时间的流逝，jquery的一些功能被逐渐挖掘出来。通过jQuery中【width(),innerWidth(),outerWidth()】这几个方法，我们探索一下网页垂直自适应的方案。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="../../jq-practice/jq/jquery-2.2.1.min.js"></script>

    <script>

        $(function(){

            alert($('div').width());          //width 内容部分

            alert($('div').innerWidth());      //width+padding 内容部分和padding部分

            alert($('div').outerWidth());      //width+padding+border 包含border部分

            alert($('div').outerWidth(true));     //width+padding+border+margin 包含margin部分。
//jquery太强大了

        });

    </script>

</head>

<body>

<div style="width: 100px; height: 100px; padding: 10px; border: 4px solid red; margin: 5px; background: blue;" ></div>

</body>

</html>

经过了一段岁月，我们来看看垂直自适应的方案。一般的业务型公司会要求顶部靠顶，底部靠底，中间的部分高度自适应。

首先我们设置

body {

margin: 0;

}

在这个基础上，我们进行计算浏览器的高度

totalH=$(window).height()

我们计算顶部和底部所占据的所有的高度

var h1=$("#header").outerHeight(true)

var h2=$("#footer").outerHeight(true)

计算剩下的部分占据的高度的总和为

var h3=totalH-h1-h2

h3就是中间部分内容所占距的所有的高度了。

那么新的问题来了，怎么设置中间的高度了。好了如果有 margin,那就要h3-margin了。

如果不为box-sizing:border-box 那就h3-border-padding了。

总之剩下h3减去大家用的才是自己用的。

特别奉上demo一个。

下载

后期我们会补充有些非计算类型的自适应的方案，请期待。

下面我们说下我们在开发中常遇见的问题

这里的width和height和css中的width和height有本质的不同，完全不是一个概念

#div1

{

width:400px;

height:400px

border:10px solid red;

box-sizing:border-box;

}

算上 border一共才400px，其实实际内容也就380px;

jQuery中【width(),innerWidth(),outerWidth()】的更多相关文章

  1. JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

    JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...

  2. jQuery中width、innerWidth、outerWidth的区别

    原文:摘自http://www.canaansky.com/blog/107/ 在css的盒子模型中,最内部是content area,然后是padding.border.margin 那么width ...

  3. jQuery中的width() innerWidth() outerWidth() outerWidth(true)的区别

    width()仅仅包括content(内容) innerWidth()包括content(内容)和padding(补白) outerWidth()包括content(内容),padding(补白)和b ...

  4. jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读

    在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...

  5. jQuery—一些常见方法（3）【width(),innerWidth(),outerWidth()】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery width(), innerWidth(), outerWidth() 区别

    #div1 { width: 100px; height: 100px; border: 5px black solid; padding: 10px; margin: 10px; backgroun ...

  7. width() innerwidth() outerwidth() css('width')

    不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...

  8. jquery中innerwidth，outerwidth，outerwidth和width的区别

    在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...

  9. jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别

    jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...

随机推荐

  1. day23 模块引入的一些说明

    模块导入多次也是只导入一次 sys.modules里面会查看有没有被导入 导入后的模块内部的函数,变量就都可以拿来用了 给模块起别名,可以提高代码的兼容性 import time as t 但是被起别 ...

  2. Java微信公众号安全模式消息解密

    这篇文章主要为大家详细介绍了Java微信公众号安全模式消息解密,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.微信公众平台下载解密工具,导入项目中,根据demo解密消息 public stat ...

  3. 05 自学Aruba之AAA profile无法删除问题

    点击返回:自学Aruba之路 05 自学Aruba之AAA profile无法删除问题 在新建完成AAA profile之后,可能存在后续不需要或者变动,那就要删除多余的AAA profile . 其 ...

  4. 自学Aruba7.3-Aruba安全认证-802.1x认证（web页面配置）

    点击返回:自学Aruba之路 自学Aruba7.3-Aruba安全认证-802.1x认证(web页面配置) 步骤1 建立AP Group,命名为test802-group 步骤2   将AP加入到AP ...

  5. 学习Spring Boot：（二十一）使用 EhCache 实现数据缓存

    前言 当多次查询数据库影响到系统性能的时候,可以考虑使用缓存,来解决数据访问新能的问题. SpringBoot 已经为我们提供了自动配置多个 CacheManager 的实现,只要去实现使用它就可以了 ...

  6. 【BZOJ1814】Ural 1519 Formula 1 （插头dp）

    [BZOJ1814]Ural 1519 Formula 1 (插头dp) 题面 BZOJ Vjudge 题解 戳这里 上面那个链接里面写的非常好啦. 然后说几个点吧. 首先是关于为什么只需要考虑三进制 ...

  7. 【BZOJ1856】[SCOI2010]字符串（组合数学）

    [BZOJ1856][SCOI2010]字符串(组合数学) 题面 BZOJ 洛谷 题解 把放一个\(1\)看做在平面直角坐标系上沿着\(x\)正半轴走一步,放一个\(0\)看做往\(y\)轴正半轴走一 ...

  8. VB: 再次使用的体会

    放下VB已经有7.8年的时候了. 记得在上学的时候,一直迷恋着它,学了三年的VB,写了不少小软件. 到了工作之后,转到JAVA后,就一直没用VB. 这次的项目由于与系统的相关性高以及安装文件的大小有限 ...

  9. 在 CentOS 6.x 上安装最新版本的 git

    在 CentOS 的默认仓库中有git,所以最简单的方法是: $ sudo yum install git 这种方法虽然简单,但是一般仓库里的版本更新不及时,比如 CentOS 仓库中的 git 最新 ...

  10. 漏洞评估工具Nexpose的配置使用

    nexpose是领先的漏洞评估工具之一.Nexpose社区版是一个免费的程序,其他版本是收费的.在这篇文章中,我们将使用Nexpose免费社区版,里面有扫描32主机的能力.用户界面干净.报告强大.像大 ...