I have 3 <cflayoutarea> tags within like this:
<cflayout type="border" fittowindow="true" >
<cflayoutarea name="headerArea" align="center" position="top" size="75" overflow="hidden" style="letter-spacing:10px; font-size:34px;">
</cflayoutarea>
<cflayoutarea name="contentArea" align="center" position="center" style="border: 3px green solid;" >
<img src="img/hd04.jpg"/>
</cflayoutarea>
<cflayoutarea align="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...
AdChoices