解决 KendoUI TabStrip 高度 100% 问题
关键代码:
.k-tabstrip .k-content { position: absolute; top: 41px; bottom:; }
以下为原文:
14 Jun 2012 (Link to this post)
Please help!
- Steven
0 postsRegistered:
28 Oct 2010-->
10 Jul 2012 (Link to this post)
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?

577 posts
Registered:
24 Sep 2012
-->
12 Jul 2012 (Link to this post)
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

0 posts
Registered:
28 Oct 2010
-->