css-calc

问题 Is there any way to use or implement modulus operator in css calc function? I know there is mod operator and IE supports it, but what about other browsers? For example #element-id{ width: calc( 100% mod 5 ); } 回答1: Unfortunately, there is no more mention of the mod operator in recent specs. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. You may want to resort to using javascript to

问题 This question already has an answer here : Parse errors when using calc with rem and px (1 answer) Closed 3 years ago . I need to validate a CSS3 file where I'm using the following code: width:calc(96.3% - 312px) It returns this error: Value Error : width Parse Error - 312px) My last choice is to use a Javascript function on page load and window resize to get the width value when it's possible using CSS3 (only for IE8 or older). 回答1: This appears to be a bug in the validator. Your calc()

问题 How do I use a CSS calc function inside another CSS calc function? According to this post it is possible but there is no example of that. 回答1: It is possible to use calc() inside another calc(). An example: div{ width: calc(100% - (1% + 30px));/* calc(1% + 30px) is nested inside calc()*/ } div p{ width: calc(100% - 30px);/*100% is total width of the div*/ } Update on nested calc with css variables: .foo { --widthA: 100px; --widthB: calc(var(--widthA) / 2); --widthC: calc(var(--widthB) / 2);

问题 I have the following CSS: body { width: calc(700px + 2 * 4rem); } .someclass { margin: calc(2rem - 2px) 0; } When I run this through the W3C CSS validation, I get Value Error : width Parse Error + 2 * 4rem) Value Error : margin Parse Error - 2px) 0 What’s causing this? All the units I’m using in calc() are length units, and calc() should be able to handle it. 回答1: This is a known bug in w3 css validator: https://www.w3.org/Bugs/Public/show_bug.cgi?id=18913 来源： https://stackoverflow.com

问题 This question already has answers here : Less aggressive compilation with CSS3 calc (4 answers) Closed 3 years ago . Right Now I'm trying to do this in CSS3 in my LESS code: width: calc(100% - 200px); However, when LESS compiles it is outputting this: width: calc(-100%); Is there a way to tell LESS not to compile it in that manner and to output it normally? 回答1: Using an escaped string (a.k.a. escaped value): width: ~"calc(100% - 200px)"; Also, in case you need to mix Less math with escaped

问题 We have now started using calc() in css, for setting widths on a result of calculation. For example: <div id='parent'> <div id='calcWidth'></div> </div> #parent{ width:100px; } #calcWidth{ width:calc(100% - 3px); height:100px; background:red; } I know how calc() works, but I just want to know what is returned in css, in the place of calc(100% - 3px); in the example given above. Whats my confusion? In the above example width:calc(100% - 3px); say the 100% width is actually 100px , which will

问题 I wanted to use margin-right to auto + some pixels by using css3 calc() but seems the statement is wrong. selector{margin: calc(auto + 5px); So, how can use so that it can take auto margin and plus fixed pixels margin? Something like this! 回答1: From MDN : The calc() CSS function can be used anywhere a <length> , <frequency> , <angle> , <time> , <number> , or <integer> is required. With calc(), you can perform calculations to determine CSS property values. You cannot use auto there, as it's

问题 How can I do this? $('#element').animate({ "width": "calc(100% - 278px)" }, 800); $('#element').animate({ "width": "calc(100% - 78px)" }, 800); I can do it if it's only % or only px , but not calc() , can I use some other option of jQuery? or some other trick of JavaScript? It's a change that have to be done when the user clicks some element, so: $("#otherElement").on("click", FunctionToToggle); when the user clicks the $("#otherElement") the toggle effect has to occur. 回答1: maybe this helps:

问题 I tried to set CSS calc() using jQuery animate, for example: $element.animate({ height: 'calc(100% - 30px)' }, 500); and I noticed that calc() is not working with jQuery animate... I hope that there is a way to do it, I don't want a similar way to do it, an alternative or a workaround, I want to set calc() Is this impossible? In any way? If it is possible, please can you show how? 回答1: Setting calc() like you want won't work. The easiest way to do it is to "calculate" it's value into a

问题 I would like to use inherit with calc() like this: #foo { animation-duration: 10s; } #foo > .bar { animation-duration: calc(inherit + 2s); /* =12s */ } But it don't seem to works. Is it browsers bug or specs? 回答1: The inherit keyword can only exist alone as a value in a property declaration. It cannot be used with anything else as a value, because it's a value in and of itself. This means it cannot be used with functions like calc() either. See CSS2.1 and css3-cascade. Furthermore, the calc()