title: HTML5 + CSS3 Backwards compatibility on calc() css function
body: <p>Here's the fiddle: <a href="http://jsfiddle.net/F793U/1/" rel="nofollow">http://jsfiddle.net/F793U/1/</a></p>
  
  <p>I am creating a web application with 4 sections that take up 100% of the window real estate.  Two of the sections, side-bar and content, have their own scrollbars.  The browser scrollbars should never be seen.  To achieve this I have used the css calc() function.</p>
  
  <p>My question is: Is there a simpler way to achieve this?  And, if not, how can I apply this to older browsers (such as IE 8 and before)?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/style.css" type="text/css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="header-wrap"&gt;
          &lt;div class="header"&gt;
              &lt;div class="logo"&gt;&lt;h4&gt;Header&lt;/h4&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="content-wrap"&gt;
          &lt;div class="side-bar"&gt;
              Sidebar
          &lt;/div&gt;
          &lt;div class="content-top"&gt;
              &lt;div class="top"&gt;Content-Top&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
             &lt;br /&gt;
             &lt;div style="width: 95%; margin: 0 auto;"&gt;
                  Content
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  html, body {
      height: 100%;
      background: #d4d4d4; 
      font-family: "helvetica neue", Tahoma, Sans;
  }
  ::-webkit-scrollbar {  
      width: 12px;  
  }  
  ::-webkit-scrollbar-track {  
      background-color: #cecece;  
      border-left: 1px solid #ccc;  
  }  
  ::-webkit-scrollbar-thumb {  
      background-color: #c0c0c0;  
      border-radius: 6px;
  }  
      ::-webkit-scrollbar-thumb:hover {  
      background-color: #aaa;  
  } 
  .header-wrap {
      width: 100%;
      height: 30px;
  }
  .header {
      width: 100%;
      height: 29px;
      background: #c0c0c0;
      background: -webkit-linear-gradient(bottom, #cacaca,#eaeaea); /* For Safari */
      background: -o-linear-gradient(bottom, #cacaca, #eaeaea); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(bottom, #cacaca, #eaeaea); /* For Firefox 3.6 to 15 */
      background: linear-gradient(bottom, #cacaca, #eaeaea); /* Standard syntax */
      border-bottom: 1px solid #a0a0a0;
      top: 0;
  }
  .content-wrap {
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      height: 100%;
      width: 100%;
      min-width: 800px;
      height: -moz-calc(100% - 31px);
      height: -webkit-calc(100% - 31px);
      height: calc(100% - 31px); 
  }
  .side-bar {
      overflow-y: scroll;
      width: 280px;
      min-width: 280px;
      border-right: 1px solid #a0a0a0;
      height: 100%;
      padding: 0 10px;
      float: left;
  }
  .content-top {
      margin-left: 300px;
      margin-right: 0;
  }
  .top {
      width: 100%;
      height: 98px;
      border-bottom: 2px groove #fff;
  }
  .content {
      overflow-y: scroll;
      height: 100%;
      height: -moz-calc(100% - 100px);
      height: -webkit-calc(100% - 100px);
      height: calc(100% - 100px); 
      margin-top: 0;
      margin-left: 300px;
      margin-right: 0;
      margin-bottom: 0;
  }
  </code></pre>