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

  • 苹果11如何分屏多窗口(苹果11如何分屏微信)

    苹果11如何分屏多窗口(苹果11如何分屏微信)

  • 拼多多上限了怎么办(拼多多上限了怎么取消)

    拼多多上限了怎么办(拼多多上限了怎么取消)

  • 操作系统中什么文件系统支持加密(操作系统计算机系统中)

    操作系统中什么文件系统支持加密(操作系统计算机系统中)

  • gpd电脑是哪个国家的(gpd是电脑吗)

    gpd电脑是哪个国家的(gpd是电脑吗)

  • 华为手机字体变小怎么调(华为手机字体变小了怎么回事)

    华为手机字体变小怎么调(华为手机字体变小了怎么回事)

  • 充电器给电瓶充电怎样知道已充满(充电器给电瓶充电风扇不转什么原因)

    充电器给电瓶充电怎样知道已充满(充电器给电瓶充电风扇不转什么原因)

  • xr左下角阴影要修么(iphone左下角有阴影)

    xr左下角阴影要修么(iphone左下角有阴影)

  • 笔记本可以加显卡吗(笔记本加显卡)

    笔记本可以加显卡吗(笔记本加显卡)

  • 笔记本电脑的寿命大概有多长(笔记本电脑的寿命一般多少年)

    笔记本电脑的寿命大概有多长(笔记本电脑的寿命一般多少年)

  • 怎么使用已购买的流量包(已经购买了)

    怎么使用已购买的流量包(已经购买了)

  • id面容不可用怎么回事(id面容不可用怎么关闭)

    id面容不可用怎么回事(id面容不可用怎么关闭)

  • 抖音举报一次会怎么样(抖音举报一次后再次举报)

    抖音举报一次会怎么样(抖音举报一次后再次举报)

  • 博朗耳温枪提示err什么意思(博朗耳温枪提示err)

    博朗耳温枪提示err什么意思(博朗耳温枪提示err)

  • 绿洲怎么删照片(绿洲怎么删除关注的人)

    绿洲怎么删照片(绿洲怎么删除关注的人)

  • iphone7怎么拍背景虚化(如何用iphone7拍出好照片)

    iphone7怎么拍背景虚化(如何用iphone7拍出好照片)

  • 剪切板是内存的一块区域吗(剪切板是内存的一个区域)

    剪切板是内存的一块区域吗(剪切板是内存的一个区域)

  • 车载蓝牙忽略怎么还原(车载蓝牙忽略设备后怎么重新连接)

    车载蓝牙忽略怎么还原(车载蓝牙忽略设备后怎么重新连接)

  • 小米9pro怎么设置息屏预览(小米9a怎么设置)

    小米9pro怎么设置息屏预览(小米9a怎么设置)

  • iphone11Pro怎么隐藏单个软件(苹果11por手机怎么隐藏应用图标)

    iphone11Pro怎么隐藏单个软件(苹果11por手机怎么隐藏应用图标)

  • 华为永久关闭talkback(华为永久关闭桌面弹出广告怎么关闭)

    华为永久关闭talkback(华为永久关闭桌面弹出广告怎么关闭)

  • wifi会泄露上网记录吗(wifi泄露上网记录怎么办)

    wifi会泄露上网记录吗(wifi泄露上网记录怎么办)

  • 手机上有个月亮标志是什么意思(手机上有个月亮的图标是什么意思)

    手机上有个月亮标志是什么意思(手机上有个月亮的图标是什么意思)

  • RuoYi-Vue——图标使用(vue调整图标大小)

    RuoYi-Vue——图标使用(vue调整图标大小)

  • esxcfg-advcfg命令  配置主机(ech命令)

    esxcfg-advcfg命令 配置主机(ech命令)

  • 企业缴纳所得税税率
  • 节能服务公司可以做什么
  • 公司章程在工商局
  • 偶然所得代扣代缴义务人
  • 部分产品退货怎么办
  • 工资不纳税项目
  • 电子税务局发票验旧怎么操作
  • 农产品计算抵扣的税务政策
  • 收到虚开的普票已经入账怎么调账
  • 企业所得税年报补报
  • 个人独资企业缴纳个人所得税
  • 员工替公司垫付的费用还没有报销就被开除了
  • 个人经营所得核定征收超过多少要交税
  • 如何查询进项发票是否作废
  • 开具旧税号也能认证成功
  • 金税盘的年费怎么做抵扣帐
  • 想要房贷利息抵税怎么办
  • 现金盘亏账务处理分录
  • 向购买方收取的价外费用
  • 增值税留抵税额账务处理
  • 季度所得税可以不预缴吗
  • 税基式减免的内容有哪些?
  • 1697510302
  • win7电脑加入域
  • php parse_url
  • 前端 vue
  • 实际投资收益率等于什么
  • 结转本年利润的分录怎么写
  • php调用sql server存储过程
  • 出租固定资产取得的收入属于收入要素吗
  • php制作验证码
  • 计算企业所得税分录
  • php生成xml文件
  • 网络请求失败什么意思
  • 直接进入税金及附加的科目
  • 固定资产到期后残值怎么处理
  • 新手为什么要买二手车
  • 个体工商户在哪开电子发票
  • python中for循环的缩进规则
  • 个税查询和实发工资不符合
  • 我向银行借钱我是贷方还是借方
  • 建筑安装增值税纳税地点
  • 怎么理解财务会计这个岗位
  • 小型企业需要给员工买社保吗
  • 民办幼儿园账务月末结转
  • 跨区域缴纳个税相关规定
  • 以前年度的销售退回能否直接冲减销售收入
  • 当月已经认证的发票可以取消认证吗
  • 生产车间包括什么
  • 新成立的教育机构值得去吗
  • 机票改签手续费能报销吗
  • 转卖增值税犯罪吗
  • 应计入营业外支出的有哪些
  • 盈利是不是利润的意思
  • 费用报销流程及制度
  • mysql完整教程
  • Win7 64位旗舰版系统打开应用程序提示“发生未知的软件异常0xc06d007e”的解决方法
  • ubuntu怎么样
  • mac系统怎么新建txt
  • 苹果电脑 输入
  • 安装最新的powershell,了解新功能和改进
  • win10预览版绿屏重启解决
  • 轻量级个人用linux桌面系统
  • win7 桌面空白
  • windows 10 mobile apk
  • win8系统没有wifi
  • win7的系统升级win10
  • win8自启动在哪儿设置
  • css制作排行榜
  • jquerymobile
  • python数字图像处理库
  • unity游戏官网
  • 你可能不知道的湖北
  • node.js做服务器
  • shell脚本 ftp
  • unity shader视频教程
  • Python中的除号
  • tiny rails汉化
  • 土地招标拍卖挂牌
  • 盐城买家电到哪里买
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设