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

Expand to 100% Height and Auto-Resize

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-state-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

For more runnable examples on the Kendo UI TabStrip widget, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article