css的calc高度计算

最新推荐文章于 2022-12-13 16:57:06 发布
最新推荐文章于 2022-12-13 16:57:06 发布
阅读量7.6k 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/neoveee/article/details/53397020
版权

场景需求：子div的高度设置为100%的同时，减去10px,可以用css的calc高度计算

div{

   height:calc(100% - 10)    //注意：必须在百分数后面加空格才生效

}

参考链接：http://www.ophome.cn/question/32312


neoveee
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3高度计算函数cal_CSS3 calc()会计算属性详解
weixin_30682905的博客
02-15 1839
前言正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。怎么使用calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题，而且还可...
css height属性中的calc方法
imkaifan的博客
07-15 668
css height属性中的calc方法： 例如父盒子是100%的高度 盒子里面的head部分固定位140px 内容部分始终为剩余的全部高度 height: calc(100% - 140px); 切结"+或-"两边要有空格 不然不生效
height calc()函数 css中用100%的宽度/高度
qq_37916164的博客
04-01 9630
在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的: .container{ height: calc(100% - 40px); //注：减号前后要有空格，否则很可能不生效！！ } 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 扩展：vh：...
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
热门推荐
qq_39877681的博客
12-13 1万+
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
CSS盒子模型
J三石的博客
02-28 411
Margin(外边距) （边距）- 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) （填充）- 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。 计算盒子边框 div { width: 300px; border: 25px solid green; pad
旧版火狐浏览器使用calc()计算元素高度（height）
一条咸鱼的blog
12-10 883
最近在适配比较老的火狐浏览器，发现了一个问题，给元素设置宽度和高度时，使用了calc（）方法，但是宽度生效了，高度却没有，原代码是这么写的： width: calc(100% - 40px); height: calc(100% - 40px); 试过了-moz-calc()方法，也不生效，在查阅了一些资料后，这样改就可以了 height: calc(100vh - 40px); 注：我的火狐版本是52.9（32位） ...
CSS3 calc()会计算属性详解
09-27
1. `calc()`可以应用于任何有大小定义的CSS属性，如边框宽度、内边距、外边距、字体大小、宽度和高度。 2. 支持的运算单位包括相对单位（如`rem`、`em`、`%`）和绝对单位（如`px`）。 3. 计算优先级遵循常规数学运算...
巧用CSS3的calc()宽度计算做响应模式布局的方法
01-19
其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们...
CSS使用calc()获取当前可视屏幕高度的实现
11-19
CSS3引入了新的功能来实现这一目标，其中包括相对长度单位和`calc()`函数。下面将详细介绍这些概念以及如何使用它们来获取并利用当前可视屏幕的高度。 首先，我们来看一下CSS3的几种相对长度单位： 1. **em**：em...
浅析CSS中calc()的使用
09-24
在CSS世界里，`calc()`函数是一个非常实用的特性，特别是在布局设计中，它允许开发者进行动态计算，以便更精确地控制元素的尺寸。`calc()`的引入是CSS3的一个重要创新，它使得开发者不再受限于固定数值，而是能够...
详解CSS 3 中的 calc() 方法
09-24
在CSS 3中，`calc()`函数是一种强大的计算属性值的方法，它允许开发者动态地计算长度、频率、角度、时间、百分比、数值等。这个功能对于布局和响应式设计尤其有用，因为它允许我们根据需要精确调整元素的尺寸。本文...
height：calc（100%-100px）如何兼容ie8
qq_36528523的博客
05-14 1万+
做公司后台管理系统时，右边content-main内容块高度出现了兼容问题。是content-main包裹了iframe。如何兼容ie8，贴出以下代码部分（css,js）原来css供参考另一个参考地址：https://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery...
CSS中的计算属性
xiaowude_boke的博客
12-06 2437
CSS计算属性的使用以及应用情景
【CSS笔记】— 使用calc()计算宽高（vw/vh）
weixin_34148508的博客
12-18 1178
【CSS笔记】— 使用calc()计算宽高（vw/vh） calc()是什么？ 简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等， calc()语法 calc的语法就是简单的四则运算， 使用“+”、“-”、“*” 和 “/”四则运算； 可以使...
CSS 弹性布局（flex）的height计算
我有一个魔盒的博客
11-08 2850
弹性布局父元素的height=所有子元素的元素高度，而子元素又能继承父元素高度（height:100%）。
css3自适应宽度高度calc
qq_25103439的博客
05-22 662
height:calc(100% - 200px);
div设置height:100%;无效的原因
weixin_34112208的博客
10-18 870
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS让内部容器高度随着父容器高度变化的解决办法
cjsyr_cjsyr的专栏
11-07 1万+
使用position绝对定位属性来实现CSS内部子容器高度随着外部父容器高度变化而变化效果，我们在重构页面时间经常会碰到使用一个外部大容器里面放置两个左右浮动容器的布局，有时候为了视觉效果，我们需要让里面两个子容器的高度必须保持一致，但是在无法确定的容器具体高度的情况下（因为DIV容器经常需要根据里面内容的多少来自定义高度），那么我们唯一的办法就是让里面的容器高度跟随外部父容器高度变化而变化，但是
css calc计算vh
最新发布
06-07
CSS中的calc()函数可以用于计算视口高度（vh）的值。例如，如果您想要一个元素的高度为视口高度的80％，并且要将其与另一个元素高度的50像素相加，则可以使用以下代码： ``` height: calc(80vh + 50px); ``` 这将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值