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;
漫思
分类:
前端开发
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器