Highlighted

cflayoutarea Height

Contributor ,
Aug 08, 2015

Copy link to clipboard

Copied

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

Views

173

Likes

Translate

Translate

Report

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

cflayoutarea Height

Contributor ,
Aug 08, 2015

Copy link to clipboard

Copied

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

Views

174

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 08, 2015 0

Have something to add?

Join the conversation