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

Question

我正在尝试获得一个固定的高度标题和填充屏幕的内容区域.内容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", element).outerHeight(), 10);
            $(".t-grid-content", element).css("height", newHeight + "px");
        }
    </script>

Answer 1

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