Menu
Is it possible to use calc() inside of a CSS function like transform or translate?
I cannot seem to get it working. Here is a demo so you guys can play around:
http://jsfiddle.net/qdJwY/1/
937
It is possible to use calc() inside another calc().
A solution for you would be to use CSS calc, it has good browser support and fixes your issue in quite a simple manner. The only downside here is that it doesn't calculate the padding-top in % but you simply cannot calculate padding-top in % from the height of the element unless you use javascript.
CSS calc() is a function used for simple calculations to determine CSS property values right in CSS. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.
Calculations are how Sass represents the calc() function, as well as similar functions like clamp() , min() , and max() . Sass will simplify these as much as possible, even if they're combined with one another.
You can use calc() wherever you can use a length based value in CSS. The example you have provided does work, but actually adds up to 0. Here is a slightly changed demo to illustrate: http://jsfiddle.net/joshnh/6ydR3/
Also, make sure to list the unprefixed version last.
Mixing percentages with other value types in the calc() function within a transform doesn't seem to work at all in Chrome. I'll report this as a bug.
UPDATE: This has been reported as a bug here: https://code.google.com/p/chromium/issues/detail?id=150054
111
It works: http://jsfiddle.net/qdJwY/2/
(edit: Tested in Firefox only)
In your example it just so happens that 100% = 200px, so you translated by zero.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
