<script>
   var $ = $telerik.$; //make jQuery available through $ alias

  
   function oncreated() {
       var RadGrid1 = RadGrid1.gridObj();
   }

   function pageLoad() {
       setGridHeight(); //set grid's height on page load
   }

   $(window).resize(function () {
       setGridHeight(); //maintain grid's height on window resize
   });

   function setGridHeight() {
       var headerHeight = $('.header').outerHeight(),  //header height including margin, padding and borders
footerHeight = $('.footer').outerHeight(),  //footer height including margin, padding and borders
windowHeight = $(window).height(),          //window height
gridObj = $find('<%= RadGrid1.ClientID%>'), //grid's client object

gridHeight = windowHeight - (headerHeight + footerHeight + 2); //calculate grid's height
                    $('#' + gridObj.get_id()).height(gridHeight);                  //set grid's height to the calculated
                    gridObj.repaint();                                             //it is required to repaint the grid so it can recalculate its metrics after window resize
                }
</script>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" PageSize="50" AllowSorting="true" OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView Width="100%" TableLayout="Fixed">
</MasterTableView>
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
                <ClientEvents OnGridCreated="oncreated" />
</ClientSettings>
</telerik:RadGrid>

    <style>
html,
body,
form {
height: 100%;
margin: 0;
padding: 0;
vertical-align: top;
}

.header {
height: 20px;
            background: green;
color: white;
}
.footer {
height: 20px;
background: green;
color: white;
}
</style>