Css3 calc function : issue with mod operator

问题

I'm using : width:calc(100% mod 320);
but it always returns the full width of the parent element. Seemingly nothing's wrong with the syntax it looks like a support issue. Tested on chrome 37 and firefox 32.0. Here is a fiddle

<div class="mod">test2</div><!-- it should be 100px -->
.mod{
    width:calc(300px mod 200);
}

回答1:

1) It looks like only IE supports the mod operator and it does function as you thought.

2) You need to add px on the units of the modulo (as C-link mentioned)

3) As @Harry mentioned, the current spec has dropped the mod operator from the calc function

FIDDLE - (try it on Internet explorer)

Sample markup -

<div class="container">
    <div class="no">no calc</div>
    <div class="simple">simple</div>
    <div class="mod1">mod1</div>
    <div class="mod2">mod2</div>
    <div class="mod3">mod3</div>
    <div class="mod4">mod4</div>
</div>

CSS (test cases)

.container {
    width: 450px;
    border: 1px solid black;
}
.no {
   background:aqua; 
}
.simple {
    width:calc(100% - 100px);
    background:green;
}
.mod1 {
    width:calc(100% mod 200px); /* = 450 % 200 = 50px */
    background:red;
}
.mod2 {
    width:calc(100% mod 300px); /* = 450 % 300 = 150px */
    background:brown;
}
.mod3 {
    width:calc(100% mod 50px); /* = 450 % 50 = 0 */
    background:orange;
}
.mod4 {
    width:calc(50% mod 100px); /* = 225 % 100 = 25px */
    background:yellow;
}

回答2:

25% mod 2 (The remainder of 25% divided by 2)

Useful link for you, Learn to use this function. How-to use the Calc Function in CSS3

CSS

.mod{
    width: calc(300px - ((300px / 200) * 200));
    background:red;
}

DEMO

来源：https://stackoverflow.com/questions/25709194/css3-calc-function-issue-with-mod-operator

标签

html

css

css3

calc