这个写法不会生效,原因可能有两个:
1.运算符前后需要加上空格
正确写法是 height: calc(100% - 50px)
2.父容器需要设置高度才能生效
如果按照1的写法还是无法设置div高度,原因可能就是父容器没有设置高度,这个算法一定要在父容器有高度的情况下才能生效。
calc() 函数属于CSS3版本内容,用于动态计算长度值。例如:width: calc(100% - 10px);需要注意的是,运算符前后都需要保留一个空格。calc()函数支持 "+", "-", "*", "/" 运算;
举例,给一个div动态设置宽度如下:
vh,是指css中相对长度单位,表示相对视口高度(Viewport Height),1vh = 1% * 视口高度。
视口比例长度定义了相对于视口的长度大小,这是文档的可见部分。
通俗点讲,vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%