title: CSS layout for fixed header and 100% content height?
body: <p>I'm trying to get a fixed height header and a content area the fills the screen.  The content div contains a telerik mvc grid.  I've tried a few suggested on stackoverflow but the control that is the content area always seems to size incorrectly because it doesn't take into account the header fixed height, so it will scroll the extra 40px if the header is 40px. Any suggestions?  </p>
  
  <pre><code>&lt;div id="header"&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
     &lt;telerik mvc grid control&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>html,body
  {
       margin:0;
       padding:0;
       height:100%;
  }
  
  #header { 
      position:absolute; 
      height: 40px; 
      left:0; 
      top:0; 
      width:100%; 
      background:green;
    }
  
    #content { 
      position: absolute; 
      top:40px; 
      left:0;
      width:100%;
      height:100%;
      background:#eee; 
    }
  </code></pre>
  
  <p>UPDATE:
  Had to manually re-size the grid on load and window re-size.
     Add</p>
  
  <pre><code> .ClientEvents(events =&gt; events.OnLoad("resizeGrid"))
  
  
  
  &lt;script type="text/javascript"&gt;
          window.onresize = function () {
              resizeContentArea($("#Grid")[0]);
          }
  
          function resizeGrid(e) {
              debugger;
              resizeContentArea($("#Grid")[0]);
          }
  
          function resizeContentArea(element) {
              var newHeight = parseInt($(element).outerHeight(), 10) - parseInt($(".t-grid-header", element).outerHeight(), 10) - parseInt($(".t-grid-pager", element).outerHeight(), 10);
              $(".t-grid-content", element).css("height", newHeight + "px");
          }
      &lt;/script&gt;
  </code></pre>