Search code examples
javascripthtmlcssstylesheet

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?

Solution

  • 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.