title: Is there a cross-browser solution to height: calc(100%-70px)
body: <p>Is it ok yet to use this?  How do I bullet proof it for older browsers? </p>
  
  <pre><code>height: -moz-calc(100% - 70px);
  height: -webkit-calc(100% - 70px);
  height: calc(100% - 70px);
  </code></pre>
  
  <p>Here is specifically what I'm trying to accomplish.</p>
  
  <ol>
  <li>A Full Width / Fixed Height Header</li>
  <li>A Slider that stretches full width and full height - <strong>minus the height of the header</strong>.</li>
  <li>A headline block that is centered vertically and horizontally in the slider</li>
  <li>A Controls block that is always a fixed height from the bottom of the slider</li>
  </ol>
  
  <p>Here's an image of what I have been able to achieve so far.  It's ALMOST perfect, except for the part in bold above.  The slider (black area) currently stretches 100% height and flows behind the header, which isn't ok for images.</p>
  
  <p><img src="https://i.stack.imgur.com/ZQbPE.png" alt="CSS Layout"></p>
  
  <p>If I add padding or margin, it extends the slider height beyond 100% and I get a scrollbar.  Using the height calculation above seems to fix it, but from my understanding, <a href="http://caniuse.com/#feat=calc" rel="nofollow noreferrer"><code>calc()</code> isn't compatible with IE 7, IE 8, iOS 5 or lower, or Android.</a>   </p>
  
  <p>Is there a better fix for this problem?  jQuery is ok, but I'd prefer a CSS solution if one exists.</p>
  
  <p>Here's my <strong>HTML</strong>:</p>
  
  <pre><code>&lt;div class="header"&gt;
      &lt;h1&gt;Header - Full Width + 70px Height&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="slider"&gt;
      &lt;div class="headline"&gt;
          &lt;div class="headline-container"&gt;&lt;!-- for table-cell vertical centering --&gt;
             &lt;h1&gt;Headline Block&lt;/h1&gt;
              &lt;p&gt;Centered Horizontally &amp;amp; Vertically in the Slider Block&lt;/p&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="controls"&gt;
          &lt;h2&gt;Controls - Centered Horizontally &amp;amp; 40px from bottom of container&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my <strong>CSS</strong>:</p>
  
  <pre><code>html, body {
      width: 100%;
      height: 100%;
      margin: 0; padding: 0;
  }
  
  h1, h2, p {
      margin: 0;
      padding: 0;
  }
  
  .header {
    position: absolute;
    width: 100%;
    height: 70px;
    background-color: #888;
    z-index: 9999;
  }
  
  .header h1 {
    color: #fff;
    text-align: center;
  }
  
  .slider-desc {
      color: #fff;
      text-align: center;
      margin: 15px 0 0;
  }
  
  .slider {
    width: 100%;
    height: 100%;
    background-color: #000;
  }
  
  .headline {
      display: table;
      width: 100%;
      height: 100%;
  }
  
  .headline-container {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
  }
  
  .headline-container h1, .headline-container p {
      background-color: #fff;
  }
  
  .controls {
    position: absolute;
    width: 100%;
    bottom: 40px;
    text-align: center;
    background-color: yellow;
  }
  </code></pre>
  
  <p>Finally, <a href="http://jsfiddle.net/timshutes/FKZhn/" rel="nofollow noreferrer">I made a fiddle</a> in case you want to play around with it.  Thanks for the help!</p>