固定标题的CSS布局和100％的内容高度？

我正在尝试获得一个固定的高度标题和一个内容区填充屏幕.内容div包含telerik mvc网格.我已经尝试了一些建议在stackoverflow,但是内容区域的控件总是似乎不正确的大小,因为它不考虑标题固定高度,所以如果标题是40px,它将滚动额外的40px.有什么建议么？

<div id="header">
</div>
<div id="content">
   <telerik mvc grid control>
</div>

CSS

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; 
  }

更新：
必须在加载和窗口重新大小时手动重新调整网格大小.
加

.ClientEvents(events => events.OnLoad("resizeGrid"))



<script type="text/javascript">
        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",10);
            $(".t-grid-content",element).css("height",newHeight + "px");
        }
    </script>

解决方法

DEMO

HTML

<div id="wrapper">
    <div id="header">HEADER</div>
    <div id="content">CONTENT</div>
</div>

CSS

html,body {
    height:100%;
    margin:0;
    padding:0;
}
#wrapper {
    width:400px; /*set to desired width*/
    height:100%;
    margin:auto;
    position:relative;
}
#header {
    height:40px; /* set to desired height*/
}
#content {
    position:absolute;
    bottom:0;
    top:40px; /*must match the height of #header*/
    width:100%;
    overflow:auto;
}