Border Layout Height

I have searched for an answer for this with no luck other than "Use a Viewport" which is not the answer.

I have a small EXT JS app which is run in a <div> in a Metro styled management interface

The app has a Panel with a FIT layout.

Inside that I have a Panel with a BORDER layout.

I have a west region grid panel with a FIT layout and a flex = 1.

I have a center region grid panel with a FIT layout and a flex = 2.

The content of the west and center panels size to fit, i.e. both have a paging toolbar docked to the bottom of the panel which are where they should be, the proportions match the flex values.

The top panel with the fit layout fills the <div> in the management interface

The panel with the border layout scales to fit the width of the <div> BUT I cannot get it to fit the height of the div, it leaves a blank area below the panel, I need to put a height in the panel config to get it to render.

How can I get the border panel to fit the <div> height and re-size with <div> in the browser, I guess that its going to require determining the div height and recalculating the border panel height...

Please help I have spent too much time on this already

cheers

Border Layout Height