How to show the div container in the full available area with kendo ui splitter?

Question

I want to show the contents of this div in the full available area, the example I have created in jsfiddle, when loading the page it is showing like below, I want to this page for as a full page (which is encircled in green), but I am not able to cover the area which is encircled in red. Any suggestions?

<div id="main_Container" style="width:auto;height:auto;">
  <div id="splitter" >
                    <div id="Top-Pane">Top Pane Content
                        <div> Some more content</div>      
                    </div>
                    <div id="Bottom-Pane">Bottom Pane Content                            
                       <div id="tabContainer">  

                        </div>

                    </div>

  </div>
</div>

http://jsfiddle.net/KendoDev/Z4rwQ/9/

Answer 1

This is my first ever answer so be gentle! but you could add an explicit height to the splitter to be the height of the viewport:

    var viewportHeight = $(window).height();
    $("#splitter").height(viewportHeight);

and then some CSS (I've put it in stylesheet but can do inline as you did above):

#Top-Pain {
height: 50%;
}

#Bottom-Pane{
height: 50%;
}

That the desired effect? http://jsfiddle.net/chowie/Z4rwQ/11/