The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Flexible div

  • # February 5, 2010 at 1:50 pm


    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 ;-)

    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.


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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed