解决 KendoUI TabStrip 高度 100% 问题

摘自: http://www.kendoui.com/forums/kendo-ui-web/tabstrip/forcing-tabstrip-to-take-up-100-of-it-s-parent-container.aspx

关键代码:

.k-tabstrip .k-content {

    position: absolute;

    top: 41px;

    bottom: 0;

}   

 以下为原文:

14 Jun 2012 (Link to this post)

I'm trying to get the tabstrip inner container to take up 100% of the height & width of the parent div it's in. Nothing I've tried seems to accomplish this.
Please help!

• Steven

  
   

  10 Jul 2012 (Link to this post)

  Jon,
  I am having a similar issue.   Anyone figure this out?
  I have the following markup:

  <div id="tabContainer" style="height: 500">

      <div id="tabDetail">

          <ul>

              <li class="k-state-active">Employee Management</li>

              <li>Transfer History</li>

              <li>Compensation</li>

              <li>Dashboard</li>

              <li>Reporting</li>

          </ul>

      </div>

  </div>

  and the corresponding code:

  $("#tabDetail").kendoTabStrip( {

      contentUrls: [

          "html/Workforce/Page1.htm",

          "html/Workforce/Page2.htm",

          "html/Workforce/Page3.htm",

          "html/Workforce/Page4.htm",

          "html/Workforce/Page5.htm",

          "html/Workforce/Page6.htm"

      ]

  });

  I would like not to have to be forced in to managing the resize if possible.
  Anyone?
• Alexander Valchev

  
   

  12 Jul 2012 (Link to this post)

  Hi guys,
  To accomplish this you could use the following CSS:

  #tabstrip { /* tabstrip element */

      height: 500px;

      position: relative;

  }

   

  .k-tabstrip .k-content {

      position: absolute;

      top: 41px;

      bottom: 0;

  }

  As an alternative approach, instead of setting the tab strip's element height, I would suggest setting the height of the content. Thus way the tab strip's parent container will automatically resize.

  .k-tabstrip .k-content {

      height: 500px;

  }

  
  Regards, Alexander Valchev the Telerik team

   

  Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

   
• Steven

  
   

  12 Jul 2012 (Link to this post)

  Alexander,
  Thanks for this reply.   I will check it out.   I was hoping there was a way to do it where it would size as the window is re-sized rather than hard coding the height or adjusting via JS.   Is that possible?
• Alexander Valchev

  
   

  17 Jul 2012 (Link to this post)

  Hi Steven,
  This is possible, to achieve it I suggest modifying the styles in this way:

  #tabstrip { /* tabstrip element */

      position: absolute;

      top: 0;

      bottom: 0;

      left: 0;

      right: 0;

      width: auto;

      height: auto;

  }

   

  .k-tabstrip .k-content {

      position: absolute;

      top: 41px;

      bottom: 0;

  }

  I hope this helps.
  Regards, Alexander Valchev the Telerik team

   

  Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

   
• Gary

  
   

  03 Dec 2012 (Link to this post)

  Yes, this works but if you have a grid on the Tab that contains an embedded TabStrip in the detail Template as I have it tries to apply the .k-tabstrip .k-content settings to that as well, with bad consequences obviously.
  Any ideas how we just get the css:

  .k-tabstrip .k-content {

      position: absolute;

      top: 41px;

      bottom: 0;

  }   
To apply ONLY to the root #tabstrip ??
• Dimo

  
   

  05 Dec 2012 (Link to this post)

  Hello Gary,
  Of course, you can use a child selector instead of a descendant selector, and use the root TabStrip ID instead of its CSS class.
  Greetings, Dimo the Telerik team

   

  Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!