title: Evaluate CSS calc function in JS
body: <p>I am trying to figure out a way to execute the CSS calc function directly in my js file in order to compare two elements height.</p>
  
  <p>So let's say i have two elements that I get using jQuery, and all I want to do is something around those simple lines : </p>
  
  <pre><code>if (element1.height &gt; element2.height) then ...
  </code></pre>
  
  <p>Element2 is nested within Element1, who has an <code>overflow:scroll.</code></p>
  
  <p>Problem is, my element1 has <strong>all attributes</strong> clientHeight, scrollHeight,etc <strong>equals to 0</strong> and when i go in the element1.style.height the result is : "calc(100% - 64px)". <em>Please do note that the result of this is never equal to 0px since my element1 height when i inspect it is around 500px (of course depends of the screen size)</em>. And my element2 height is obtained in px using element2.scrollHeight (more reliable in my case).</p>
  
  <p>So in the end I'm trying to compare two expressions that would like this : calc(100% - 64px) > 452 .. And of course this doesn't work.</p>
  
  <p>Is there any way I could execute the calc() function within my js file to get the equivalent height in px in order to compare my two elements ? Or can I have access to the data anywhere else ?</p>
  
  <p>My end goal is to know whether the element2's height is bigger than element1's. So any other implementation that height calculation is welcome as well.</p>