Grow your CSS skills. Land your dream job.

Flexible div

  • # February 5, 2010 at 1:50 pm

    Hi,

    i tried a lot the last days and searched for solutions but i just didn’t manage to achieve what i need.
    Sounds like a normale flexibel <div> with scollbars in the beginning, but no it’s not that easy.

    3 elements on one site:
    – header.div (fix height)
    – main.div (flexible height)
    – footer.viv (fix height)
    – header always on top
    – footer always on bottom
    -> that’s easy

    – no browser scrollbar
    – scrollable content
    -> still easy

    – main height should be flexible with the window height
    – main should always fill the rest of height, which is left between header & footer.
    – if then there is to much content in main.div show scrollbars.
    – if user resizes window main should resize and show/hide scrollbars on the fly
    -> no clue

    i tried it with divs, had no chance. now i’m trying a table. (seems better)
    i have problems because, overflow:scroll; just works when a height is set but i don’t know the height, not in px neither in %.
    Is this possible? or is it just impossible to do it – without JS of course. would be beautiful without table.
    I attached a image, maybe it helps to understand.

    so, if this is to easy for you, please, don’t tell me such things ;-)

    thanks,
    Stefan Drachsler

    # February 5, 2010 at 2:05 pm

    I had spent a bit of time working some simple code out for you until I realized what you were really asking for.

    I CAN’T STAND sites that have divs with their own scroll bars.

    What you’re asking for will require javascript to accomplish to calculate the height between the header and footer.

    # February 5, 2010 at 2:26 pm

    I understand your point, BUT it depands on the design and the site generally.
    There are times when it’s useful and the right solutions.

    the JS solution is logical.

    greetings,
    Stefan

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".