位置: 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)

  • 电气设备ex是什么意思(电气设备外壳ex表示什么标志)

    电气设备ex是什么意思(电气设备外壳ex表示什么标志)

  • 每个人只能集一个五福吗(每个人只能集一套五福吗)

    每个人只能集一个五福吗(每个人只能集一套五福吗)

  • 华为荣耀8一般寿命(华为荣耀一般多少钱)

    华为荣耀8一般寿命(华为荣耀一般多少钱)

  • 华为荣耀20pro手机怎么删除系统自带应用(华为荣耀20PRO手机电量还剩65可以充电吗)

    华为荣耀20pro手机怎么删除系统自带应用(华为荣耀20PRO手机电量还剩65可以充电吗)

  • Word标准色蓝色怎么设置(word标准色蓝色黑体)

    Word标准色蓝色怎么设置(word标准色蓝色黑体)

  • 你好您拨打的电话暂时无法接通(你好您拨打的电话正在通话中)

    你好您拨打的电话暂时无法接通(你好您拨打的电话正在通话中)

  • vivox30和x50对比(vivox30与x50的区别)

    vivox30和x50对比(vivox30与x50的区别)

  • 笔记本发烫正常吗(笔记本发热发烫)

    笔记本发烫正常吗(笔记本发热发烫)

  • jefan00是华为什么型号(jefan00是华为什么手机)

    jefan00是华为什么型号(jefan00是华为什么手机)

  • 亚马逊平台的基本规则(亚马逊平台的基本模块不包括)

    亚马逊平台的基本规则(亚马逊平台的基本模块不包括)

  • soul设备已达最大注册量怎么办(soul设备已达最大注册上限)

    soul设备已达最大注册量怎么办(soul设备已达最大注册上限)

  • ipad有一键静音吗(苹果平板一键静音)

    ipad有一键静音吗(苹果平板一键静音)

  • 信号显示h+代表什么网络(信号显示h十)

    信号显示h+代表什么网络(信号显示h十)

  • 怎么统计excel中相同内容的表格有多少个(怎么统计Excel中每个附件的数据)

    怎么统计excel中相同内容的表格有多少个(怎么统计Excel中每个附件的数据)

  • 苹果11的关机键在哪里(苹果11的关机键失灵了怎么办)

    苹果11的关机键在哪里(苹果11的关机键失灵了怎么办)

  • 为什么新注册的微信号被限制登录(为什么新注册的微信号显示有风险)

    为什么新注册的微信号被限制登录(为什么新注册的微信号显示有风险)

  • 微信收款码为什么会异常(微信收款码为什么会有风险提示)

    微信收款码为什么会异常(微信收款码为什么会有风险提示)

  • 苹果8p访问限制没了(苹果8p访问限制密码设置教程)

    苹果8p访问限制没了(苹果8p访问限制密码设置教程)

  • 系统固件是什么(固件版本和系统版本)

    系统固件是什么(固件版本和系统版本)

  • 火山视频怎样连拍(火山视频怎么连续播放)

    火山视频怎样连拍(火山视频怎么连续播放)

  • 打电话如何录音(iphone手机打电话如何录音)

    打电话如何录音(iphone手机打电话如何录音)

  • 怎么关闭支付宝刷脸支付(怎么关闭支付宝自动续费)

    怎么关闭支付宝刷脸支付(怎么关闭支付宝自动续费)

  • 华为p30怎么看流量(华为p30pro怎么看流量使用情况)

    华为p30怎么看流量(华为p30pro怎么看流量使用情况)

  • mysql select语法的使用

    mysql select语法的使用

  • 应税劳务销售额怎么算
  • 所得税费用的计提
  • 民办非企业可以上市吗
  • 文化事业建设费怎么申报
  • 暂估入账后没有交房产税
  • 收到进项发票已认证,对方冲红重开,我方凭证什么做
  • 农产品核定扣除增值税进项税额计算表
  • 企业生产过程中执行标准要把握好以下原则
  • 会计核算形式
  • 公司租用办公室需要交房产税吗
  • 小规模纳税人费用发票怎么做账
  • 定额材料损耗率国家标准
  • 以物易物方式销售货物例题
  • 企业接受捐赠是营业收入吗
  • 物流公司货物丢失不赔偿怎么处理
  • 预收账款转为主营业务收入
  • 补去年的税款怎么做账
  • 增值税零税率发票开具条件
  • 小微企业所得税优惠政策2023
  • 保安服务税目
  • 印花税少于1元怎么处理
  • 填报退税
  • 销售费用的运费算不算增值税
  • 残保金中的工资总额在哪看
  • windows11怎么创建宽带拨号连接图标
  • 收到预付款怎么给客户写协议书
  • 员工意外伤害保险怎么买
  • 华硕主板bios更新后开不了机
  • 异常发票怎么处理
  • 固定资产没提完折旧,提前处理
  • 发放应付职工薪酬是借方还是贷方
  • 分公司可以给总公司开发票么
  • phpsubstr_replace
  • framework4.0怎么打开
  • 企业非流动资产占比多说明什么
  • 原材料入账价值包括代垫运费吗
  • 四轮电车电机价格
  • 一个残疾证一年单位免多少税2023
  • 处置长期股权投资产生的投资收益是什么
  • 年终奖是以工资形式发放吗
  • 看望员工现金属于什么费用
  • 外贸企业出口退税
  • 一般纳税人企业所得税怎么征收
  • 简述清算机构的职责
  • mysql 查找语句
  • mongodb的常用命令
  • 土地使用权转为在建工程
  • 购买服务费用
  • 生物资产包括哪两类
  • 库存商品一直没有销售怎么办
  • 工会经费计提基数包括奖金吗
  • 车辆购置税计入什么科目
  • 凭证摘要写错了已结账了怎么办
  • 2020发票丢失新规
  • 进项增值税发票抵扣期限
  • 年终奖会计怎么走账
  • 公益募捐的基金是什么
  • 坏账准备对资产负债表影响
  • 融资租赁的固定资产视为企业自有固定资产管理
  • 去年的凭证今年未入账
  • 成本会计和管理会计哪个好
  • mysql优化总结
  • hyper-v虚拟机无法初始化
  • win10设置怎么开
  • freebsd使用
  • mac连电视
  • 如何设置windows密码
  • onekey.exe是什么
  • linux网络中断
  • windows10直接安装
  • jquery window
  • jq cookie
  • bat批处理命令大全
  • js原生dialog
  • listview subitems
  • 归并代码
  • 销售农药化肥的经营范围
  • 企业注销结果查询
  • 诺诺发票怎样上报汇总
  • 黔西南州医疗保险报销比例
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设