Convert css calc function to value in px

Question

I'm trying to set the minimum height of some element to the minimum width of another. That minimum width of some element is given using some calc formula in less, and that formula might change later on. I tried setting the min-height to the min-width using JQuery, but it simply inserted the calc equation that didn't give the same output because 20% of the width is not 20% of the height. I was looking at css width: calc(100% -100px); alternative using jquery , but the solutions for that equation requre knowing what the formula was in the jquery, and I want to write my code such that it works no matter how much you change the calc formula in the less.

Example: http://jsfiddle.net/n6DAu/2116/

$(element).width() returns the width in pixels
$(element).css('min-width') returns the equation

Answer 1

Seems to be browser-specific to me. Chrome reports min-width as the calculation, and in the developer tools DOM inspector, it's also reported as the calculation.

Firebug, on the other hand, reports it as the value in pixels, both in the javascript and in the DOM inspector (using your fiddle). Firefox's built in dom inspector also reports it as the pixel size, not the calculation.

I didn't bother testing in IE.

So my answer would be - Possibly - you can't do it. (or at least you can't do it in a generic reliably cross-browser way) The value of min-width is going to change anyway, based on the enclosing element, so it may be something you'd just have to calculate on the fly, since you can find out how wide the enclosing element is at any given point in time.