percent height not working in tabPanel

[desilentio]

Hi,

I'm trying to set the height of a tabPanel using a percentage but it doesn't seem to be working.

<rich:panel id = "mainPanel" styleClass = "mainPanel">
 <a4j:outputPanel id = "mainTabOutputPanel" ajaxRendered = "true">
 <rich:tabPanel id = "mainTabPanel"
switchType = "client"
contentClass = "mainTabPanel"
tabClass = "mainTab"
style = "height: 100%">
 <rich:tab id = "readTab" label = "Read">
 </rich:tab>
 </rich:tabPanel>
 </a4j:outputPanel>
</rich:panel>

css

.mainPanel {
 height: 80%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 1em;
 width: 1020px;
}

.mainTabPanel {
 background-color: #EEEEEE;
 height: 100%;
}

.mainTab {
 height: 30px;
 font-size: 1.5em;
 width: 100px;
}

I've tried various combinations of setting the height in the css class and using the height parameter but neither does what I expect, which is for the tabPanel to roughly fill the outer panel. Instead the height is always only the size of the tallest element within

Is there a way to get the tab panel to be a percentage height relative to the outer panel?

Thanks for any help.

Using Tomcat 6.0, RichFaces 3.2.0 and Sun RI JSF on a Mac 10.4.