cflayoutarea Height

Contributor ,
Aug 08, 2015 Aug 08, 2015

Copy link to clipboard


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 name="contentArea" align="center" position="center" style="border: 3px green solid;" >

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


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



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...







Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation