react中佈局樣式style.less中的calc不生效
阿新 • • 發佈：2018-11-26
去使用：
| .modal_overlay { position: fixed; top: 0; left: 0; bottom:0; z-index: 1000; background-color:rgba(11,11,11,0.4); width: 100%; .modal { position: fixed; top: calc(100% – 260px); left: 0; bottom: 0; right: 0; z-index: 1001; background-color: #fff; width: 100%; height: 260px; } } |
但是結果生成的頁面中，calc沒有生效，導致頁面中看不到彈出頁面：
然後此處，去掉top屬性，才可以看到頁面：
此處的top變成了：calc(-160%)
從而沒有其效果
現在隨便改變值，比如100px，就可以看到效果：
所以，覺得應該是：
less的css中calc沒有生效。
reactjs less calc
css – Less Aggressive Compilation with CSS3 calc – Stack Overflow
css3 – Disable LESS-CSS Overwriting calc() – Stack Overflow
less中解決CSS3的calc衝突問題 – 笨兔子 – SegmentFault
【總結】
把：
| top: calc(100% – 260px); |
改為：
| top: calc(~"100% – 260px"); |
果然就生效了：
此處top值就是：calc(100% – 260px)
可以正常工作了。