0 Replies Latest reply on Aug 8, 2015 8:22 PM by jfillman

    cflayoutarea Height

    jfillman Level 1

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