css calc()不起作用

html-css025

css calc()不起作用,第1张

calc函数运用最多的场景就是css设置百分比之后需要机上或者减去一些固定长度，比如后台管理系统的左侧菜单栏，高度100%但是需要减去最上方的logo，系统名称的高度什么的，应该是最常见的运用calc计算属性设置高度。

这个写法不会生效，原因可能有两个：

1.运算符前后需要加上空格

    正确写法是 height: calc(100% - 50px)

2.父容器需要设置高度才能生效

    如果按照1的写法还是无法设置div高度，原因可能就是父容器没有设置高度，这个算法一定要在父容器有高度的情况下才能生效。

问题：在微信小程序中使用height:calc(xx - xx)设置元素高度无效 排查原因:calc属性设置height或width时，要求父容器有明确的对应属性设置，当父容器没有设置时，calc计算无法完成。因为我想设置高度的元素没有父容器，所以calc失效。 解决办法：1.给该元素添加设置明确高度的父容器。2.直接通过page{height:100%}解决。