I'm having trouble getting tab items to stretch vertically based on the height of the parent tabstrip. What is happening is my items div ends up going past the tabstrip div. I cant help but think there is something going on behind the scenes that I'm missing.
Thanks
I have the following layout:
HTML:
<div id="tabstrip">
<ul>
<li class="k-state-active">First Tab </li>
<li>Second Tab </li>
</ul>
<div class="workspace">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis
ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing
et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis,
ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula,
massa nisl tempor sem, in ullamcorper neque mauris in orci.</p>
</div>
<div class="workspace">
<p>
Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie
accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed, scelerisque sed sapien.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.</p>
</div>
</div>
CSS:
#tabstrip
{
position: absolute;
top: 40px;
bottom: 0px;
}
.workspace
{
height: 100%;
}
Thanks
I have the following layout:
HTML:
<div id="tabstrip">
<ul>
<li class="k-state-active">First Tab </li>
<li>Second Tab </li>
</ul>
<div class="workspace">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis
ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing
et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis,
ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula,
massa nisl tempor sem, in ullamcorper neque mauris in orci.</p>
</div>
<div class="workspace">
<p>
Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie
accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed, scelerisque sed sapien.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.</p>
</div>
</div>
CSS:
#tabstrip
{
position: absolute;
top: 40px;
bottom: 0px;
}
.workspace
{
height: 100%;
}