您现在的位置是:首页 > Javascript
当前栏目
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
2023-03-31 10:39:48 时间
先了解一下CSS3的相对长度单位和绝对长度单位(参考详细教程) :
相对长度单位
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。
单位 | 描述 |
---|---|
em | 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px; |
ex | 依赖于英文字母小 x 的高度; |
ch | 数字 0 的宽度; |
rem | rem 是根 em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小; |
vw | viewpoint width,视窗宽度,1vw=视窗宽度的1% ; |
vh | viewpoint height,视窗高度,1vh=视窗高度的1% ; |
vmin | vw和vh中较小的那个; |
vmax | vw和vh中较大的那个。 |
绝对长度单位
绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。
px | 像素 (1px = 1/96th of 1in) |
in | 英寸 (1in = 96px = 2.54cm) |
cm | 厘米 |
mm | 毫米 |
我们通过vh / vw 可以获得当前屏幕的视窗高度/宽度,所以在css中,通过计算这个高度即可使得div的高度自动撑开到屏幕高度。而计算这个高度可以使用css3的calc()函数(参考详细教程):
calc() 函数的定义与用法:
calc() 函数用于动态计算长度值,需要注意的是:
- 运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
- 任何长度值都可以使用calc()函数进行计算;
- calc()函数支持 “+”, “-”, “*”, “/” 运算;
- calc()函数使用标准的数学运算优先级规则;
运用实列:
1. 设置div的高度满屏、宽度满屏:
方法一:height:100vh; width: 100vw;
<div class="div">一些文本...</div>
<style>
.div {
height:100vh;
width: 100vw;
position: absolute;
left: 50px;
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
</style>
方法二:width: calc(100%);height:calc(100%);
<div class="div">一些文本...</div>
<style>
.div {
width: calc(100%);
height:calc(100%);
position: absolute;
left: 50px;
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
</style>
2. 自定义div的高度、宽度:calc(expression)
expression:必须是一个数学表达式,结果将采用运算后的返回值。
<div class="div">一些文本...</div>
<style>
.div {
//width: calc(50%*2);
//height:calc(40%+50px);
width: calc(100%/6);
height:calc(100%-50px);
position: absolute;
left: 50px;
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
</style>
相关文章
- 网页外链用了target="_blank",结果悲剧了
- 如何让你的脚本可以在任意地方都可执行?
- CSS 伪元素的一些罕见用例
- 知道因为啥失败吗?构建端到端ML框架的经历启示录
- 盘点那些程序员必备的小众网站,建议收藏!
- 谷歌工程师概述了 Angular 的下一步计划
- 共码未来丨行业伙伴畅谈 “多端触达”,展望全球技术生态
- 前端比较简单,不需要架构?
- 看完就知道,你之前的微服务是怎么玩垮的了……
- Spring Boot 实现跨域的五种方式,总有一种适合你
- 在阿里做前端程序员,我是这样规划的
- 系统成功率99.99%+,美团CI/CD流水线引擎演进实践
- 分布式链路追踪Jaeger + 微服务Pig在Rainbond上的实践分享
- React:我们即将和后端 API 告别?
- 驱动页面性能优化的三个有效策略
- HarmonyOS自定义组件之仿微信朋友圈主页
- HDC技术分论坛:HarmonyOS新一代UI框架的全面解读
- 十个 Web 日志安全性分析工具
- 鸿蒙开源第三方组件—SwipeCaptcha_ohos2.0滑动拼图验证组件
- HarmonyOS 基础之 UI组件 (二)