title: Various calc() polyfill libraries not working in IE8
body: <p>I've been asked to create a page with a header and sidebar where the sidebar is 100% the height of the page minus the heading height, without a vertical scrollbar. The following works in FF, Chrome, and IE9+, but the polyfill doesn't do anything in IE8.</p>
  
  <p>I've tried the following 2 polyfill calc libraries in IE8, and neither work. Am I doing something wrong, or do the libraries not work in the given scenario? I've tried loading the script using Modernizr as per the example, as well as loading the script directly at the end of the page without effect.</p>
  
  <ul>
  <li><a href="https://github.com/CJKay/PolyCalc" rel="nofollow">https://github.com/CJKay/PolyCalc</a></li>
  <li><a href="https://github.com/closingtag/calc-polyfill" rel="nofollow">https://github.com/closingtag/calc-polyfill</a></li>
  </ul>
  
  <p>Code Example:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;title&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="modernizr.custom.js"&gt;&lt;/script&gt;
          &lt;style&gt;
              body,html{
                  height: 100%;
                  color: white;
                  margin:0;
                  padding: 0;
              }
              .heading{
                  background:red;
                  height: 100px;
              }
              .box{
                  background: blue;
                  width:200px;
                  height: 100%;
                  height: calc(100% - 100px);
              }
  
          &lt;/style&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="heading"&gt;Heading&lt;/div&gt;
          &lt;div class="box"&gt;Sidebar&lt;/div&gt;
  
          &lt;!--MUST be placed after styles have loaded--&gt;
          &lt;!--&lt;script type="text/javascript" src="./calc.min.js"&gt;&lt;/script&gt;--&gt;
          &lt;!--&lt;script type="text/javascript" src="./polycalc.js"&gt;&lt;/script&gt;--&gt;
          &lt;script&gt;
              jQuery(document).ready(function() {
              });
                      Modernizr.load({
                      test: Modernizr.csscalc,
  //                    nope: 'calc.js'
                      nope: 'polycalc.js'
                  });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>