What's the best way to split the screen between a fixed-height section and an expandable section?

Ok, last one for tonight.

I've got a screen where I want a header image always at the top of the screen. It's 224 pixels tall. Then I want a vertically-oriented tableview to fill the rest of the screen below it. I could calculate the actual pixel height remaining, but I'd like it to expand to fill the iPhone 5/larger Android phones.

Here's what I tried:


<panel name="categoriespage" alias="CATEGORIESPAGE" width="100%" height="100%" alpha="1" background="#ffffff">

<panel name="topbar" alias="HOMETOP" width="100%" height="224" background="333333">
<image name="image" alias="IMAGE" url="" width="100%" height="100%" />
</panel>

<panel name="tableholder" width="100%" height="[eval:100%-[object:HOMETOP.height]]" bottomof="HOMETOP">
<tableview name="categoriestable" rowheight="70" width="100%" height="100%" datasource="categoriessource" orientation="vertical" paginate="no" align="center" valign="center" margin="40" >
<object class="categoriesclass" index="[param:dataSourceIndex]" title="[param:name]" code="[param:code]" />
</tableview>
</panel>

</panel>


My eval statement produces some value, because it shows the tableview, but it's much shorter and leaves a blank area on the screen. Any tips?