这个问题，已经别扭我多年了，今天终于彻底解决了，拿出来庆贺一下。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. 【BZOJ2285】[SDOI2011]保密（分数规划，网络流）

    [BZOJ2285][SDOI2011]保密(分数规划,网络流) 题面 BZOJ 洛谷 题解 首先先读懂题目到底在干什么. 发现要求的是一个比值的最小值,二分这个最小值\(k\),把边权转换成\(t- ...

  2. 【转】嵌入式系统 Boot Loader 技术内幕，带你完全了解Boot Loader

    在专用的嵌入式板子运行 GNU/Linux 系统已经变得越来越流行.一个嵌入式 Linux 系统从软件的角度看通常可以分为四个层次: 1. 引导加载程序.包括固化在固件(firmware)中的 boo ...

  3. 洛谷 P2292 [HNOI2004] L语言 解题报告

    P2292 [HNOI2004] L语言 题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章\(T\)是由若干小写字母构成.一个单词 ...

  4. django restframework Serializers

    序列化器允许将诸如查询集和模型实例之类的复杂数据转换为原生 Python 数据类型,然后可以将它们轻松地呈现为 JSON,XML 或其他内容类型.序列化器还提供反序列化,在首次验证传入数据之后,可以将 ...

  5. linux ssh keys

    1. 原理: SSH 密钥对总是成双出现的,一把公钥,一把私钥.公钥可以自由的放在您所需要连接的 SSH 服务器上,而私钥必须稳妥的保管好. 所谓"公钥登录",原理很简单,就是用户 ...

  6. AtCoder Grand Contest 018 E Sightseeing Plan

    题意: 给定三个矩形,选定三个点,答案加上第一个点出发经过第二个点在第三个点结束的方案数,只能往右或往下走. 折腾了我半个多下午的题. 设三个矩形为$A,B,C$一个思路是枚举$B$的那个点$s(x, ...

  7. asp 读cookie 下划线 丢失

    昨天有一个用户反应,登录后还是会显示:请登录后再使用. 我一查,原来有一个cookie设置后,无法正常读取. 整个情况是这样: 登录的时候,设置2个 cookie: user_name logon_t ...

  8. 和我一起使用webpack构建react项目

    第一步:初始化项目并创建package.json文件 第二步:创建webpack.config.js文件,并写入配置. 第三步:安装webpack以及创建es6语法环境,要将html作为模板文件解析的 ...

  9. 浅谈js的数字格式

    除了正常我们常用的十进制(如5,8,12.123等),js还可以直接表示2.8.16进制 1.二进制 二进制是以0b开头 0b10; 2.八进制 八进制是以0开头 010: 3.十六进制 十六进制是以 ...

  10. Docker简介以及安装

    Docker简介以及安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是容器 1.一种虚拟化方案 与传统的虚拟机不同,传统的虚拟机是通过中间层将一台或多台独立的机器虚拟运 ...