javascript - Setting Kendo UI grid height 100% of wrapper -

i know there easy way set fixed height of kendo ui grid through api our specific needs, need make grid expand in full height of wrapper.

with following markup structure, set .wrapper height:600px , tried give .k-grid-content height:100% doesn't expand. #grid expands 100% height:100% need inside contents expand well. how achieve that?

here demo js bin

<div class="wrapper">     <div id="grid">         <div class="k-grid-header"></div>         <div class="k-grid-content"></div>         <div class="k-grid-pager"></div>     </div> </div> 

according 1 of kendo's tech support team; dimo dimov. should set height of 1 container, , inside should set 100% (including grid). manually adjust content height on document ready , window resize.

see here example:

http://jsfiddle.net/dimodi/sdfsz/

see here yours updated js function set height of wrapper window height.

http://jsbin.com/yumexugo/1/edit

essentially content resized with:

function resizegrid() {     var gridelement = $("#grid"),         dataarea = gridelement.find(".k-grid-content"),         gridheight = gridelement.innerheight(),         otherelements = gridelement.children().not(".k-grid-content"),         otherelementsheight = 0;     otherelements.each(function(){         otherelementsheight += $(this).outerheight();     });     dataarea.height(gridheight - otherelementsheight); } 

and wrapper sized (you may need modify suit layout):

function resizewrapper() {     $("#outerwrapper").height($('#body').innerheight()); } 

document ready , window resize both call:

$(window).resize(function() {     resizewrapper();     resizegrid(); }); 

relevant css:

#grid {   height: 100%; }  #outerwrapper{   overflow: hidden; }