解决height calc()不生效 - 含代码

最新推荐文章于 2024-06-30 09:56:50 发布

草巾冒小子

最新推荐文章于 2024-06-30 09:56:50 发布

阅读量1.1k

点赞数

文章标签： css 前端 html

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/128277094

版权

解决height calc()不生效 - 含代码

在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的:

分析：

不生效的原因： -左右未预留空格

解决办法：

/*正确写法*/
.body-son{
  height: calc(100% - 40px);  //注：减号前后要有空格，否则很可能不生效！！
}

以下内容转载自：height calc()函数 css中用100%的宽度/高度

只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算；

扩展： vh：相对于视口的高度。视口被均分为100单位的vh

注意：

运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数使用标准的数学运算优先级规则；
它支持 “+”, “-”, “*”, “/” 运算