Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexible DIV to cover the rest of the page and divide the height in half

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #163014
    Mori
    Participant

    Here’s a sample layout:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>Dynamic DIV</title>
        <style>
            #header {
                background: green;
            }
            #header * {
                vertical-align: middle;
            }
            button {
                float: right;
            }
            #top {
                background: yellow;
            }
            #bottom {
                background: aqua;
            }
        </style>
    </head>
    
    <body>
        <div id="header">
            <label for="checker">Check</label>
            <input type="checkbox" id="checker">
            <label for="slider">Slider</label>
            <input type="range" id="slider"><span>Some text</span>
            <button type="button">Bar</button>
            <button type="button">Foo</button>
        </div>
        <div id="content">
            <div id="top">Top content</div>
            <div id="bottom">Bottom content</div>
        </div>
    </body>
    
    </html>
    

    Demo: http://jsfiddle.net/CZt36/1/

    How can I extend the content DIV to he rest of the page so that the top and bottom DIVs get 50% of the content DIV height?

    #163018
    Mori
    Participant

    I used the viewport height unit.

    It doesn’t work well. Giving 10% to the header DIV doesn’t always look good. Just change the screen resolution and see what happens.

    #163019
    Paulie_D
    Member

    You would need javascript to determine the height of the content wrapper.

    #163024
    Mori
    Participant

    I probably would, but a CSS approach is preferable.

    #163045
    seahorsepip
    Participant
    #163056
    Mori
    Participant

    Why 22px? It’s about 70px in IE11.

    #163072
    Paulie_D
    Member

    I probably would, but a CSS approach is preferable.

    That’s my point…I don’t think there is one.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.