New to Kendo UI for jQuery? Download free 30-day trial

Expand the TabStrip to 100% Height and Auto-Resize


Product Progress® Kendo UI® TabStrip for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I applt a 100-percent height to the Kendo UI for jQuery TabStrip and auto-resize the control?


When making the TabStrip 100% high, keep in mind that web standards require elements with percentage height to have a parent element with an explicit height. This rule applies recursively until either an element with a pixel height, or the <html> element, is reached. 100% high elements cannot have borders, paddings, margins, or visible siblings.

The milestones of the approach are:

  • Make the TabStrip <div> and its auto-generated parent <div> 100% high
  • Disable TabStrip animations or use a fade animation. The default expand animation is not going to work.
  • Calculate the height of the TabStrip content containers based on the height of the widget <div>.

The example below demonstrates how to make the TabStrip widget 100% high and resize together with the browser window.


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


    <div id="tabstrip">
        <li class="k-active">Item 1</li>
        <li>Item 2</li>
        Content 1
        <p><button type="button" class="k-button" id="appendButton">Append Item</button></p>
        Content 2

      var resizeAll = function() {

      var tabStripElement = $("#tabstrip").kendoTabStrip({
        animation: {
          open: {
            effects: "fade"

      tabStripElement.parent().attr("id", "tabstrip-parent");

      var tabStrip ="kendoTabStrip");

      var expandContentDivs = function(divs) {
        var visibleDiv = divs.filter(":visible");
                    - tabStripElement.children(".k-tabstrip-items").outerHeight()
                    - parseFloat(visibleDiv.css("padding-top"))
                    - parseFloat(visibleDiv.css("padding-bottom"))
                    - parseFloat(visibleDiv.css("border-top-width"))
                    - parseFloat(visibleDiv.css("border-bottom-width"))
                    - parseFloat(visibleDiv.css("margin-bottom")));
                    // all of the above padding/margin/border calculations can be replaced by a single hard-coded number for improved performance



            text: "Item N",
            content: "Appended Item Content"

See Also

In this article