Re: Suggestion: Introduce new height property value for full fitting space

I see. Thanks for enlightening me, guys (particularly to James Ross, who 
provided me with this sample: "http://jsfiddle.net/bqurA/1/" ).

Apparently I made a mistake when giving my test case.

Actually what I want to achieve is that the "main" blocks, in corporation 
with a number of "header" and "footer" blocks, always exactly fills the 
viewport.

The <header> blocks are supposed to be fixed at the top of the window 
whereas the <footer> blocks are supposed to be fixed to the bottom of the 
window - regardless of their actual size. The only blocks to have scrollbars 
is supposed to be the <main> blocks in between.

If the content of the main blocks is less than (ViewPortHeight - computed 
header heights - computed footer heights) then the main blocks' height is 
supposed to be stretched in order to fill the remaining height. If, however 
the sum of all the blocks (header + main + footer) is larger than 
ViewPortHeight, then the main blocks should shrink to fit and a scroll bar 
should be applied to the main blocks (and only to them):

    var actualContentHeight = computed main heights + computed header 
heights + computed footer heights;

    if (actualContentHeight < ViewPortHeight) for (main in mainElements)
        {main.height += (ViewPortHeight - actualContentHeight) / 
mainElements.length;
        main.scollBar = false;}
    else for (main in mainElements)
        {main.height -= (ViewPortHeight - actualContentHeight) / 
mainElements.length;
        main.scollBar = true;}

The desired effect can't be achieved using the "position: fixed" rule, 
because using this rule header and footer will not take part in the flow.

So the layout would look something like this:

    =================================
    |  <header>                     |
    |-------------------------------|
    |  <main>                     |S|
    |                             |C|
    |                             |R|
    |                             |O|
    |                             |L|
    |                             |L|
    |                             |B|
    |                             |A|
    |                             |R|
    |-------------------------------|
    |  <footer>                     |
    |-------------------------------|
    |  <footer>                     |
    =================================

Can this be achieved using the flex layout? Unfortunately, I'm not too 
familiar with it yet.

Regards,
Axel Dahmen

Received on Friday, 14 March 2014 12:47:47 UTC