位置: IT常识 - 正文

CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度(css获取id)

编辑:rootadmin
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度

推荐整理分享CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度(css获取id),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css获取元素,在css中获取项目名称,css获取属性值,获取css样式,获取css属性,css获取属性值,css获取class,css获取class,内容如对您有帮助,希望把文章链接给更多的朋友!

先了解一下CSS3的相对长度单位和绝对长度单位(参考详细教程) :

相对长度单位CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度(css获取id)

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

单位描述em它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;ex依赖于英文字母小 x 的高度;ch数字 0 的宽度;remrem 是根 em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小;vwviewpoint width,视窗宽度,1vw=视窗宽度的1% ;vhviewpoint height,视窗高度,1vh=视窗高度的1% ;vminvw和vh中较小的那个;vmaxvw和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>
本文链接地址:https://www.jiuchutong.com/zhishi/297531.html 转载请保留说明!

上一篇:深度学习|论文中常用的注意力模块合集(下)

下一篇:基于 transformers 的 generate() 方法实现多样化文本生成:参数含义和算法原理解读(基于transformers的nlp入门 pdf)

  • windows powershell和命令提示符一样吗(windows powershell和运行有什么区别吗?)

    windows powershell和命令提示符一样吗(windows powershell和运行有什么区别吗?)

  • vivox50pro是多少倍变焦的(vivox50pro是多少w闪充)

    vivox50pro是多少倍变焦的(vivox50pro是多少w闪充)

  • 佳能mp288打印机警告灯闪烁怎么办(佳能mp288打印机墨盒型号)

    佳能mp288打印机警告灯闪烁怎么办(佳能mp288打印机墨盒型号)

  • 无线网需要网线连接吗(无线网需要网线接口吗)

    无线网需要网线连接吗(无线网需要网线接口吗)

  • QQ扩列匹配失败(qq扩列匹配失败都三四天了)

    QQ扩列匹配失败(qq扩列匹配失败都三四天了)

  • 华为mate40pro什么时候上市(华为mate40pro什么芯片)

    华为mate40pro什么时候上市(华为mate40pro什么芯片)

  • 无法完成更新(为什么电脑无法完成更新)

    无法完成更新(为什么电脑无法完成更新)

  • 华为nova4e怎么设置虚拟键(华为nova4e怎么设置小组件)

    华为nova4e怎么设置虚拟键(华为nova4e怎么设置小组件)

  • 摄像头为什么用着用着就离线了(摄像头为什么用着用着就离线了,录有录进去)

    摄像头为什么用着用着就离线了(摄像头为什么用着用着就离线了,录有录进去)

  • 照片保密柜在哪里(照片保密柜哪个最多人用)

    照片保密柜在哪里(照片保密柜哪个最多人用)

  • 8p有128的吗(8p有没有128)

    8p有128的吗(8p有没有128)

  • 手机腾讯视频可以用微信号登录吗(手机腾讯视频可以在电视上用吗)

    手机腾讯视频可以用微信号登录吗(手机腾讯视频可以在电视上用吗)

  • 淘宝确认收货几天自动好评(淘宝确认收货几天后入账)

    淘宝确认收货几天自动好评(淘宝确认收货几天后入账)

  • 苹果怎么设置时间为24小时(苹果怎么设置时钟大图标)

    苹果怎么设置时间为24小时(苹果怎么设置时钟大图标)

  • 快手骂人举报怎么处理(快手举报骂人用什么话举报最有效果)

    快手骂人举报怎么处理(快手举报骂人用什么话举报最有效果)

  • p30pro超级夜景怎么拍(p30pro夜景模式)

    p30pro超级夜景怎么拍(p30pro夜景模式)

  • word横道图横线怎么画(word 横道图)

    word横道图横线怎么画(word 横道图)

  • 系统通知栏显示qq图标是什么意思(通知栏图标不见了)

    系统通知栏显示qq图标是什么意思(通知栏图标不见了)

  • 怎么用网络电话给别人打电话(怎么用网络电话发短信)

    怎么用网络电话给别人打电话(怎么用网络电话发短信)

  • 苹果6盲人模式怎么关闭(苹果6盲人模式怎么快捷关闭)

    苹果6盲人模式怎么关闭(苹果6盲人模式怎么快捷关闭)

  • [Vue warn]: Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘$on‘)“

    [Vue warn]: Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘$on‘)“

  • 如何让网站优化持续稳定(如何让网站优化成功)

    如何让网站优化持续稳定(如何让网站优化成功)

  • 增值税普通发票几个点
  • 公司给员工代办失业证
  • 税后净营业利润和净利润的区别
  • 小规模纳税人进项发票怎么做账
  • 资源税的征税对象都是原矿和选矿
  • 公司职工餐费用怎样入账
  • 领增值税专票需要发票吗
  • 预付押金是否可以作为成本
  • 化工原材料销售挣钱吗
  • 纳税人出租不动产预缴税款
  • 分公司怎么做
  • 固定资产拆除后账务处理
  • 递延资产放在资产负债表哪里
  • 代办企业开户
  • 高管培训费不能税前列支
  • 支付员工出差住宿费
  • 个人营业税是什么意思
  • 单位住房没有房产证是否可以买卖
  • 继承房产也需要缴税吗
  • 商家拒开发票的五大借口
  • 转让知识产权的本人申明
  • 增值税季度不超过30万
  • 文化事业建设费税收优惠政策2023
  • 机动车销售统一专票税率
  • win7为什么现在不能用了
  • 穿越火线刷枪视频教程
  • 电脑下载的文件打不开怎么回事
  • 挖机所有权需要办理什么手续吗
  • 前端获取当前地址
  • 在win7中如何设置屏幕保护程序
  • 电脑显卡排行榜
  • 股票红利税如何收
  • php数字增1
  • 自然人税收管理系统扣缴客户端怎么操作
  • vue3+ts+vite
  • php判断文件后缀
  • 月底结转汇兑损益
  • js数组entries
  • 信用减值损失科目借贷方向
  • phpcms怎么样
  • 织梦专题页模板
  • 跨国公司海外子公司
  • 外出经营税收缴纳
  • 费用的分摊要注意什么
  • 定期定额个体经营所得税申报错了怎么办
  • 银行贷款是应付账款吗
  • 建筑公司项目如何上手
  • 购进国内交通运输产品
  • 补缴以前年度所得税怎么做会计分录
  • 外币收款怎么做账
  • 小微企业增资
  • 营改增后建筑业开票规定
  • 营业外收入在汇算清缴里填哪张表
  • 企业法人投资收益交税吗
  • 销项发票能不能退税
  • 怎么取最大值函数
  • 小企业如何建立党支部
  • 项目毛利润怎么算
  • 计提折旧对公司有什么好处
  • 如何建立一个
  • 企业注销怎么回事
  • win7隐藏共享文件夹
  • macpr预设
  • u盘和移动硬盘和固态硬盘的区别
  • 忘记mysql密码
  • win7系统打开软件慢的原因
  • win7远程桌面连接命令
  • 在linux中使用v2ray
  • win7如何设置多用户
  • unity商店资源在unity中打开
  • 解决脱发的8个方法
  • JQuery实现Ajax加载图片的方法
  • 修改bash_profile
  • jquery实现div左右移动
  • nodemodules拷贝到其他目录
  • 菜鸟教程javaweb
  • javascript面向对象编程指南第三版
  • 税务局投诉怎么投诉
  • 国家税务总局23号文件
  • 买二手房土地证怎么过户
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设