Kendo UI TabStrip expanding to 100% height

by chanaka1

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="tabstrip">
    <ul>
        <li class="k-state-active">Item 1</li>
        <li>Item 2</li>
    </ul>
    <div>
        Content 1
        <p><button type="button" class="k-button" id="appendButton">Append Item</button></p>
    </div>
    <div>
        Content 2
    </div>
</div>

CSS

html,body
{
    margin:0;
    padding:0;
    height:100%;
    min-height:100%;
}


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

JavaScript

var tabStripElement = $("#tabstrip").kendoTabStrip(),
    tabStrip = tabStripElement.data("kendoTabStrip");

var expandContentDivs = function(divs) {
    divs.height(tabStripElement.innerHeight() - tabStripElement.children(".k-tabstrip-items").outerHeight() - 16);
}
// 16px are substracted to compensate for content div vertical paddings and borders

var resizeAll = function() {
    expandContentDivs(tabStripElement.children(".k-content")); 
}
    
resizeAll();

$(window).resize(function(){
    resizeAll();
});

$("#appendButton").click(function(){
    tabStrip.append({
        text: "Item N",
        content: "Appended Item Content"
    });
    expandContentDivs(tabStripElement.children(".k-content").last());
});