cflayoutarea Height

I have 3 <cflayoutarea> tags within like this:

<cflayouttype="border"fittowindow="true">

     <cflayoutareaname="headerArea"align="center"position="top"size="75"overflow="hidden"style="letter-spacing:10px; font-size:34px;">

     </cflayoutarea>

     <cflayoutareaname="contentArea"align="center"position="center"style="border: 3px green solid;">

          <imgsrc="img/hd04.jpg"/>

     </cflayoutarea>

     <cflayoutareaalign="center"position="bottom"size="75"overflow="hidden"style="bottom:0px; height:100px">

     </cflayoutarea>    

</cflayout>

My issue/question is as follows:

How do I make the center <cflayoutarea> take up 100% of the remaining height? In most browsers, the center <cflayoutarea> is too large and scrolls. Oddly enough, Chrome browser resizes the image, and the <cflayoutarea> to less than 100%. I'm not sure why that happens. I realize that I can set overflow="hidden", but that just crops the image and I'm ultimately looking to use ImageScaleToFit, to scale the image to match the size of the <cflayoutarea> so that is scales for different screen sizes. Before I can scale the image, the center <cflayoutarea> needs to be set to use the remaining screen space and I need to know it's height.

I would prefer to not use overflow="hidden" because as users navigate, I want to swap out the content in the center <cflayoutarea> to other content that will scroll.

Would appreciate any help! I'm back to ColdFusion after 10-11 years, mostly on Flex...