Burdock Burdock - 1 month ago 10
Javascript Question

How to make compound styles

I would like to make some compound

style
values for example:
height:100%-10px;


Is there some way to do this with
CSS
?

Or do you have to use
JavaScript
?

If so can you post your suggestions?

Answer

You would use calc().

height: calc(100% - 10px);

jsFiddle example

w3.org 8.1. Mathematical Expressions: ‘calc()’

The calc() function allows mathematical expressions with addition (‘+’), subtraction (‘-’), multiplication (‘*’), and division (‘/’) to be used as component values. The ‘calc()’ expression represents the result of the mathematical calculation it contains, using standard operator precedence rules. It can be used wherever , , , , , or values are allowed. Components of a ‘calc()’ expression can be literal values, ‘attr()’ or ‘calc()’ expressions, or values that resolve to one of the preceding types.

Comments