1

I would like to calculate some value depending on other value. For example:

.my-div {
  width: 50px;
  height: calc(width * 2)
}

Is it possible?

tbodt
  • 16,609
  • 6
  • 58
  • 83
Valent
  • 86
  • 6
  • 1
    With pure CSS no. You can use SASS or LESS, or JS. – Vucko Mar 13 '14 at 14:47
  • 1
    Possibly related: http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio – cimmanon Mar 13 '14 at 14:50
  • Well this is a good solution. But actually I want to calc other properties, not only width/height. Now I see it's impossible with pure CSS. Thanks. – Valent Mar 13 '14 at 15:05

2 Answers2

0

See the MDN article on calc

This is an experimental feature, and would be possible- eg:

.my-div {
  width: 50px;
  height: calc(50px * 2);
}

However in this case as width is already known it would provide little value.

Typically in such circumstances you may be best relying on a library such as jQuery (or vanilla JS).

SW4
  • 69,876
  • 20
  • 132
  • 137
0

This is not possible in CSS, however CSS-preprocessors like SASS and LESS make it possible. Quite frankly this is one of many reasons why css-preprocessors have been developed.

I recommend you check the sites for more information.

Marco van Dijk
  • 244
  • 1
  • 6
  • But will it re-calc height if width is dynamically changed? – Valent Mar 13 '14 at 14:52
  • It doesn't, it simply generates to CSS. If you want the height to be dynamically changed according to width and the ratio should remain the same then I recommend you check the [solution](http://stackoverflow.com/a/12121309/3233450) @cimmanon mentioned. No need to use javascript when something can be done with pure CSS. – Marco van Dijk Mar 13 '14 at 14:58