css踩坑之calc无效问题

问题描述:页面顶部和底部是固定的,中间部分显示动态内容,但是为了适配,中间部分的高度不能写死,所以采用calc方式,但是尝试使用calc(100%-100px)和calc(100vh-100px)均无效。

解决办法:网上找了很多资料,最后才发现这是calc的一个坑,正确的写法如下:

height:calc(100vh - 100px);

发现区别了吗?是不是一脸懵逼。其实区别就在于100vh和100px之间的-前后要加空格。

 

上一篇:H5页面中 video 标签的属性和样式


下一篇:17Lamdba有参数有返回值(自定义接口)