这个问题，已经别扭我多年了，今天终于彻底解决了，拿出来庆贺一下。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. linux上搭建nginx

    安装包:(按顺序执行过去即可,重复无所谓)c++编译环境 yum install gcc-c++ 安装pcre yum -y install pcre-devel 安装openssl yum -y i ...

  2. MT【13】三角函数求范围

    解答:AB显然正确,C中$a$取0时,解为三个,C 错误.我们主要看一下D 评:这里提供了一个处理$sin^2xcosx$的常见方法:平方,单变量后用算术几何不等式.

  3. 架构师成长之路6.2 DNS配置文件

    点击返回架构师成长之路 架构师成长之路6.2 DNS 配置文件 /etc/hosts 主机的一个文件列表 ,添加记录如:111.13.100.92   www.baidu.com 对于简单的主机名解析 ...

  4. eclipse 代码模板

    平常在借助eclipse进行开发时,有很多代码是重复的,这个时候我们可以利用eclipse自带的代码模板来进行快速输入,我们都知道,在eclipse中输入main,然后按下alt+/就会立马生成整个m ...

  5. 洛谷 P2746 [USACO5.3]校园网Network of Schools 解题报告

    P2746 [USACO5.3]校园网Network of Schools 题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作"接受学校&q ...

  6. Redis中的简单动态字符串

    Redis没有直接使用C语言传统的字符串表示(以空字符结尾的字符数组,以下简称C字符串),而是自己构建了一种名为简单动态字符串(simple dynamic string,SDS)的抽象类型,并将SD ...

  7. 手动实现staticmethod和classmethod装饰器

    首先,staticmethod和classmethod装饰器是通过非数据描述符实现的.用法简单,这里就不细说了. 这里主要分析一下staticmethod和classmethod是如何通过描述符实现的 ...

  8. Memcached在Windows下的配置和使用

    Memcached学习笔记---- 安装和配置 首先,下载Memcached相关文件. 打开控制台,进入Memcached主程序目录,输入: memcached.exe -d install //安装 ...

  9. Linux中配置Aria2 RPC Server

    启动Aria2 RPC Server 直接在终端中执行aria2c --enable-rpc --rpc-allow-origin-all可直接开启RPC服务. 这种方法并不能进行个性化的参数设置,需 ...

  10. 利用千人基因组数据库查看SNP在不同地区、国家、洲的频率及个数

    首先,进入千人基因组数据库的网站:https://www.ncbi.nlm.nih.gov/variation/tools/1000genomes/ 如下图所示,在数据库的框框里输入我们感兴趣的SNP ...