height:calc（）写法是什么意思

最新推荐文章于 2023-09-30 22:10:15 发布
最新推荐文章于 2023-09-30 22:10:15 发布
阅读量2.9k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45549435/article/details/106000876
版权
博客介绍了使用calc计算高度，通过计算本身的100%减去64px，具体为min - height:calc( 100vh - 64px )，涉及前端开发中高度计算的内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

min-height:calc( 100vh - 64px )
calc计算 本身的100% 减去64px

巧用CSS3的calc()宽度计算做响应模式布局的方法
09-24
CSS3中的calc()功能是一个非常强大的工具，它允许我们在CSS中使用数学表达式来计算属性值。这对于响应式设计尤其有用，因为通过它可以轻松地创建灵活的布局，适应不同屏幕尺寸和分辨率。在响应式布局中，我们经常...
CSS3 calc()会计算属性详解
01-21
前言 正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法； calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用...标准的写法： .class{ /* area: expression; */
记录微信小程序 height: calc(xx – xx)；无效问题
12-30
遇到一个小问题，记录一下 问题：在微信小程序中使用scroll-view标签时，用height:cale(xx – xx)设置高度无效，在page中设置高度为百分百依旧无效 解决办法：直接在最大的view标签中设置高度为百分百即可 <!-- 视频列表 --> page { height: 100%; } .videoList { height: calc(100% - 480rpx); }
height calc()函数 css中用100%的宽度/高度
qq_37916164的博客
04-01 1万+
在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的: .container{ height: calc(100% - 40px); //注：减号前后要有空格，否则很可能不生效！！ } 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 扩展：vh：...
height:calc(100% - 10px)的用法 - 布局篇
悦涵仙子的技术笔记本
07-22 1万+
下图demo所示，如何让一个侧边栏垂直方向全尺寸拉伸？ 代码如下： height:calc(100% - 10px)
height: calc(100vh - 100px)；
fury的博客
09-30 4031
因此，这段代码的意思是将元素的高度设置为视窗高度减去100像素。这样，元素的高度会根据视窗大小自动调整，并且保留一定的空间（100像素）在顶部或底部。其中，vh是视窗的高度单位，表示相对于视窗高度的百分比，1vh等于视窗高度的1%。而px则是像素单位，表示具体的像素数值。这段代码是用来设置元素的高度。它使用了CSS的calc()函数来计算高度值，公式为100vh - 100px。
height:calc(100% - 10px)的用法(垂直居中) - 布局篇
热门推荐
草巾冒小子的博客
03-02 3万+
如何让一个 height:calc(100% - 10px)的用法 - 布局篇
min-height: calc(100vh - 60px)
最新发布
03-30
正确的写法应该是min-height: calc(100vh - 60px);，注意运算符前后必须有空格，否则可能不被识别。例如，calc(100vh-60px)没有空格会导致错误。这一点需要提醒用户注意。 然后是兼容性问题。calc函数在现代浏览器...
:style=“{height:calc(100vh - statusH)+‘px’}” 这段代码有什么问题么　应该怎么写
11-16
height: calc(100vh - var(--status-height)) + 'px'; /* 使用变量管理状态栏高度 */ /* 或者在需要的地方使用JavaScript来动态计算 */ /* let statusHeight = document.documentElement.clientHeight - window....
expo 中 calc()的替代写法
06-06
在 Expo 中，如果你不想使用 `calc()` 函数，也可以使用 `Dimensions` API 来计算组件的尺寸。`Dimensions` API 可以帮助你获取设备的宽度和高度，从而进行计算。 以下是一个使用 `Dimensions` API 计算组件宽度的...
height calc()函数 css中用100%的宽度/高度
探索 Java 编程的技巧、最佳实践和解决方案。本博客提供针对 Java 开发者的实用指南，涵盖从基础到高级话题，旨在提升编程效率和技能。
11-05 3043
在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的: .container{ height: calc(100% - 40px); //注：减号前后要有空格，否则很可能不生效！！ } 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 扩展：vh：相对于视口的高度。视口被均分为100单位的vh 注意： 运算符前后都需要保留一个空格，例如：width: ..
height: calc(100vh-60px) 这样写不对吗
qq_25741071的博客
09-04 1031
这样写可以确保 CSS 解析器正确解析数学表达式，并计算出正确的结果。请注意，在数学表达式中的运算符两侧都需要添加空格，以确保正确的计算结果。函数用于执行数学计算，并将结果作为 CSS 属性的值。
css高度100% - 100px与calc()函数
qq_30351747的博客
03-02 5034
css高度100% - 100px 描述 给一个盒子设置宽高，长度是100%加减一个像素值，一般height:100% - 100px;这样写是不会生效的。 解决 使用 calc()函数 calc()：这个函数就是用来计算长度值的，可以加减乘除一个像素值 height: calc(100% - 100px); 这样就可以了。 .........
CSS3 calc() 函数，height: calc(100% - 70px)；
qq_27009517的博客
07-05 2293
今天做练习的时候遇到了这样一行代码：height: calc(100% - 70px);，100%的高度减去70px？？？这是什么函数？竟然支持不同单位之间的运算？！ 通过查阅资料，我终于认识了这个函数——calc()函数。 calc()函数是CSS3 提出的，目的是动态改变宽度/高度的变化，适配问题。 <div> <div class=“head”>标题</div> <div class=“contain”>内容</div&gt...
calc
weixin_33971130的博客
01-17 1027
calc( )的定义 用于动态计算长度值可以用在任何长度,数值,时间,角度,频率等处 calc( )的运算符 ＋ － ＊ ／ width:calc(50% + 15px); height:calc(100% - 20px); width:calc(15 * 4px); height:calc(100% / 4); ⚠️运算符两边需要有空格...
css height属性中的calc方法
imkaifan的博客
07-15 774
css height属性中的calc方法： 例如父盒子是100%的高度 盒子里面的head部分固定位140px 内容部分始终为剩余的全部高度 height: calc(100% - 140px); 切结"+或-"两边要有空格 不然不生效
css的calc高度计算
neoveee的博客
11-29 7695
场景需求：子div的高度设置为100%的同时，减去10px,可以用css的calc高度计算 div{    height:calc(100%-10) } 参考链接：http://www.ophome.cn/question/32312
解决height calc()不生效 - 含代码
草巾冒小子的博客
01-31 1608
【代码】解决height calc()不生效 - 含代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值