解决 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!