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 ...
随机推荐
- bzoj 2120 数颜色 (带修莫队）
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2120 题意:两种操作:Q 询问区间 l - r 内颜色的种类 ,R 单点修改 思路 ...
- 自学Linux Shell9.3-基于Red Hat系统工具包：RPM属性依赖的解决方式-YUM在线升级
点击返回 自学Linux命令行与Shell脚本之路 9.3-基于Red Hat系统工具包:RPM属性依赖的解决方式-YUM在线升级 本节主要介绍基于Red Had的系统(测试系统centos) yum ...
- HTML 百度地图API调用示例源码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- git 28原则
一.流程 $ git init # 创建一个新的仓库 sublime 编写文本,不要使用win自带文本编辑器 $ git add file1 # 将文件添加到暂存区 $ git add file2 $ ...
- C语言实现KMP模式匹配算法
next: /*! * Description: * author scictor <scictor@gmail.com> * date 2018/7/4 */ #include < ...
- Mysql占用CPU过高如何优化，如何解决
2017-02-28 15:13 331人阅读 评论(0) 收藏 举报 MySQL占用CPU过高如何优化 一次生产DB服务器的 超负荷运行问题解决: 1.查看生产DB服务器top列表, 执行 to ...
- Excel：LOOKUP函数的经典用法
1.逆向查询 下面这个表中,A:C列是员工基础信息表,分别是部门.姓名和职务. 现在要根据E5单元格中的员工姓名,在这个信息表中查询属于哪个部门,也就是咱们常说的逆向查询,就可以使用LOOKUP函数 ...
- X-UA-compatible浅谈
最近了解到svg,原来它出现之前好几年,微软已经推出了vml,但是那时候却被人吐槽无数,看来过早的创新也是失败的原因之一呢~ 为什么谈到这个话题呢?因为IE史上有一个特别奇怪的浏览器IE8,它及不兼容 ...
- Linux命令之ls
ls命令 用处:列出此目录下的文件和目录 用法:直接在终端中输入ls就好了 示例: 看到了吗,文件夹和文件都显示出来了哦 可是,电脑里面有时会有一些隐藏文件,我还想看到这些隐藏文件怎么办呢?加 -a ...
- JAVA记录-POST与GET方式区别
1.get是从服务器上获取数据的一种请求,post是向服务器提交数据的一种请求. 2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到 ...