1. 程式人生 > >react中佈局樣式style.less中的calc不生效

react中佈局樣式style.less中的calc不生效

去使用:

.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

Usage | Less.js

【總結】

把:

    top: calc(100% – 260px);

改為:

    top: calc(~"100% – 260px");

果然就生效了:

此處top值就是:calc(100% – 260px)

可以正常工作了。