Макет CSS для фиксированного заголовка и 100% высоты содержимого?

Я пытаюсь получить заголовок с фиксированной высотой и область содержимого, заполняющую экран. Контент div содержит сетку telerik mvc. Я пробовал несколько вариантов, предложенных в stackoverflow, но элемент управления, представляющий собой область содержимого, всегда имеет неправильный размер, потому что он не учитывает фиксированную высоту заголовка, поэтому он будет прокручивать дополнительные 40 пикселей, если заголовок равен 40 пикселей. Какие-либо предложения?

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