Auto Expanding Splitter

HTML

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<div id="vertical">
    <div>
        <p>
            Outer splitter : top pane (resizable and collapsible)
        </p>
    </div>
    <div>
        <div id="horizontal" style="height: 100%; width: 100%;">
            <div>
                <p>
                    Inner splitter :: left pane
                </p>
            </div>
            <div>
 Inner splitter :: center pane

            </div>
            <div>
                <p>
                    Inner splitter :: right pane
                </p>
            </div>
        </div>
    </div>
    <div>
        <p>
            Outer splitter : bottom pane (non-resizable, non-collapsible)
        </p>
    </div>
</div>

CSS

html,body{height:100%;margin:0;padding:0;overflow:hidden}

#vertical{height:100%;border-width:0;}
#horizontal{width:100%;height:100%;}

JavaScript

function resizeTabs() {
    var paneHeight = $("#tabstrip").closest(".k-pane").innerHeight();
    var tabsHeight = $("#tabstrip > .k-tabstrip-items").outerHeight();
    $("#tabstrip > div").height(paneHeight - tabsHeight - 18);
}

$("#vertical").kendoSplitter({
    orientation: "vertical",
    panes: [
        { collapsible: true, size: "60px" },
        { collapsible: false },
        { collapsible: false, resizable: false, size: "10%" }
    ]
});

$("#horizontal").kendoSplitter({
    panes: [
        { collapsible: true, size: "100px" },
        { collapsible: false },
        { collapsible: true, size: "20%" }
    ],
    resize: resizeTabs
});

$("#tabstrip").kendoTabStrip();

resizeTabs();