jQuery中【width(),innerWidth(),outerWidth()】
这个问题，已经别扭我多年了，今天终于彻底解决了，拿出来庆贺一下。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()】的更多相关文章
- JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...
- jQuery中width、innerWidth、outerWidth的区别
原文:摘自http://www.canaansky.com/blog/107/ 在css的盒子模型中,最内部是content area,然后是padding.border.margin 那么width ...
- jQuery中的width() innerWidth() outerWidth() outerWidth(true)的区别
width()仅仅包括content(内容) innerWidth()包括content(内容)和padding(补白) outerWidth()包括content(内容),padding(补白)和b ...
- jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读
在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...
- jQuery—一些常见方法（3）【width(),innerWidth(),outerWidth()】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery width(), innerWidth(), outerWidth() 区别
#div1 { width: 100px; height: 100px; border: 5px black solid; padding: 10px; margin: 10px; backgroun ...
- width() innerwidth() outerwidth() css('width')
不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...
- jquery中innerwidth，outerwidth，outerwidth和width的区别
在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...
- jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别
jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...
随机推荐
- day30 纸牌游戏
import json from collections import namedtuple Card = namedtuple('Card', ['rank', 'suit']) # rank 牌面 ...
- 自学Linux Shell6.2-用户自定义环境变量
点击返回 自学Linux命令行与Shell脚本之路 6.2-用户自定义环境变量 1.设置局部用户定义变量 一旦启动bash shell(或者执行一个shell脚本),你就能创建这个shell进程可见的 ...
- 洛谷 P4345 [SHOI2015]超能粒子炮·改 解题报告
P4345 [SHOI2015]超能粒子炮·改 题意 求\(\sum_{i=0}^k\binom{n}{i}\),\(T\)组数据 范围 \(T\le 10^5,n,j\le 10^{18}\) 设\ ...
- javascript调用Flash里对象的方法(函数)搞了五个小时。
搞了几个小时后,才发现,之前走的路是错的. 今天在Firefox浏览器上测试一个javascript调用Flash中的一个对象的方法时遇到问题了, 一搞就整整搞了一个下午. 我记得之前我用Flash8 ...
- 关闭应用程序(主程序)(WPF)
很多人认为关闭应用程序应该很简单,例如WindowsForm里一个Application.Exit();方法就可以解决问题,但在WPF里面可别滥用,因为WPF里Application类没有该方法,倒是 ...
- nGrinder TestGroovy.groovy
s /** * */ package com.iteye.lindows.mysql /** * @author Lindows * */ class TestGroovy { static main ...
- System.Runtime.InteropServices.COMException:“服务器出现意外情况。 (异常来自
.Net MVC导出Excel的时候,一直报错,如题.原因是因为福昕阅读器,这样设置 execl->点击文件>选项>加载项,选择com加载项,把祈福阅读器勾掉.
- 设计模式---对象创建模式之工厂方法模式（Factory Method）
前提:“对象创建”模式 通过“对象创建”模式绕开new,来避免对象创建(new)过程中所导致的紧耦合(依赖具体类),从而支持对象创建的稳定.它是接口抽象之后的第一步工作. 典型模式(表现最为突出) 工 ...
- JAVA记录-基础常识
1.==与equals区别 1)==用于基本数据类型的比较,判断引用是否指向堆内存的同一地址.---引用地址 2)equals用于判断两个变量是否是对同一对象的引用,即堆中的内容是否相同,返回值为布尔 ...
- Study 8 —— 数据类型（列表/list）
列表是一个数据的集合,集合内可以放任何数据类型,可对集合进行方便的增删改查操作 1. 定义列表: 方法一: L1 = [] #定义空列表 L2 = ['A', 'B', 'C'] #存3个值,索引0 ...