css踩坑之calc无效问题

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

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

height:calc(100vh - 100px);

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