Resizing to height to 100% doesn't work

[Sebastian]

I have a PivotGrid and a PivotConfigurator with a splitter. Now i want to set the height of both to 100% but can't get it to work.

I tried to do this like in your demo:

http://dojo.telerik.com/OSEco/6​

But that doesn't do the trick.

Here is my code:
http://dojo.telerik.com/UvUFi

I have set

html,body,form,fieldset,table,tr,td,img {
    height: 100%;
    margin: 0;
    padding: 0;
    font: 100%/150% helvetica, calibri, sans-serif;
    overflow: hidden;
}

and

"<div id=\"horizontal\" style=\"height:100%; border:0;\"><div id=\"configurator\"></div><div id=\"pivotgrid\"></div></div>"

in the function "showGrid" (there is also the initialisation of the pivotgrid and the configurator aswell as the splitter).

What am i doing wrong?

I want the pivotgrid and the configurator to fill all the height they get from the parent splitter and the splitter should fill all the height that it can get.

[Sebastian]

I changed somethings and added a new function to change the height:

function responsiveHeightResize() {
    var winHeight = $(window).height();
    var buttonsHeight = document.getElementById('buttonMenu').offsetHeight;
    var dif = winHeight - buttonsHeight;

    var splitter = $("#horizontalSplitter");
    var chart = $("#chart");
    if (splitter) {
        splitter.height(dif);
    }
    if (chart) {
        chart.height(dif);
        kendo.resize($("#chart"));
    }
}

 Everything here:

http://dojo.telerik.com/ODIvO​

But it just works after the first resize. I can't get it to work for the initialisation. I think thats because the PivotGrid loads asyncronosly.
Is there a trick or a event when the PivotGrid and the PivotConfigurator are finished with loading? Or do i miss something else?

[Sebastian]

Okay i have solved it:

http://dojo.telerik.com/idaxE