How to split pane using kendo UI

Question

I am using kendo UI jquery lib in my project, I want to split a two horizontal column pane in a single page.

This is my code,

<div id="splitter">
    <div>PANE a</div>
    <div>PANE b</div>
</div>
<script>
   $("#splitter").kendoSplitter({
      orientation: "horizontal"
   });
</script>

It works but the problem is, its splits only the half of the page. like this,

I want to split the whole page.

Answer 1

Enter the css for splitter:

#splitter{
position: fixed;
width:100%;
height:100%;
}