Menu
I can see that calc is more compatible when using webkit. Usually when you add support for webkit or moz you do something like:
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
What is the correct syntax for calc?
width: -webkit-calc(100% - 100px);
600
calc() The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.
Safari & iOS Safari (both 6 and 7) do not support viewport units (vw, vh, etc) in calc(). So in your case, try not to use viewport units in calc(), since you will have issues in Safari 6 and 7. Usually with calc() you need to also use the -webkit prefix which is required for Safari 6 and Chrome 19-25 per the spec?
To use the calc() function in React: Set the style prop on the element. Pass the result of calling calc() as the value for a CSS property. The call to calc() should be wrapped in a string, e.g. 'calc(100% - 600px)' .
In this case we use jquery to calculate the height of content div area. But now using CSS we can set height without making header and footer height fixed or using jquery function. We use css property height: calc( 100% - div_height ); Here, Calc is a function.
correct syntax for calc is
/* Firefox */
width: -moz-calc(100% - 100px);
/* WebKit */
width: -webkit-calc(100% - 100px);
/* Opera */
width: -o-calc(100% - 100px);
/* Standard */
width: calc(100% - 100px)
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
