Results 1 to 8 of 8

Thread: Flexible DIV to cover the rest of the page and divide the height in half for children

  1. #1
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default Flexible DIV to cover the rest of the page and divide the height in half for children

    Here's a sample layout:

    Code:
    <!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?

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there Rain Lover,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta charset="UTF-8">
    
    <title>Dynamic DIV</title>
    
    <style>
    html {
        margin:0;
        height:100%;
     }
    body {
        min-width:624px;
        height:calc(100% - 20px);
        min-height:122px;
        margin:10px;  
     }
    #header {
        line-height:76px;
        padding:1px 5px;
        background:green;
     }
    span{
        margin:0 10px;
     }
    input[type=button] {
        float:right;
        height:22px;
        margin:26px 0 18px 5px;
     }
    #content {
        height:calc(100% - 78px);
     }
    #top {
        height:50%;
        background:yellow;
            }
    #bottom {
        height:50%;
        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>
     <input type="button" value="Bar">
     <input type="button" value="Foo">
    </div>
    
    <div id="content">
     <div id="top">Top content</div>
     <div id="bottom">Bottom content</div>
    </div>
    
    </body>
    </html>
    The "#header element" required a larger than expected height.

    This was due to IE11's 'input type="range"' height of 74px.

    coothead

  3. #3
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by coothead View Post
    The "#header element" required a larger than expected height.
    This was due to IE11's 'input type="range"' height of 74px.
    Many thanks for the code, but I'd prefer not to give a fixed height, especially such a big height size, to the header DIV.

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default


    Go with Paul O'brian's flexible box method then.

    coothead

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,336
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    32

    Default

    You may want to test this:
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">

    <title>Dynamic DIV</title>

    <style>
    #header {position: absolute; left: 0px; top: 0px; right: 0px; background: green}
    input[type=button] {float:right;}
    #top {position: absolute; left: 0px; top: 27px; right: 0px; height: 50%; background: yellow}
    #bottom {position: absolute; left: 0px; top: 50%; right: 0px; bottom: 0px;background:aqua; }
    </style>

    </head>

    <body>

    <div id="header">
    <label for="checker" style="position: relative; top: -4px">Check</label>
    <input type="checkbox" id="checker" style="position: relative; top: -3px">
    <label for="slider" style="position: relative; top: -4px">Slider</label>
    <input type="range" id="slider" ><span style="position: relative; top: -4px">Some text</span>
    <input type="button" value="Bar" >
    <input type="button" value="Foo">
    </div>

    <div id="top" >Top content</div>
    <div id="bottom" >Bottom content</div>

    </body>
    </html>

  6. #6
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by molendijk View Post
    You may want to test this
    Why top:27px? As coothead said and I tested, the header DIV height is about 70px in IE11.

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,336
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    32

    Default

    Sorry, I forgot about the IE11-issue. If you want the header to have a small height in both IE and non-IE, you could try this:
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">

    <title>Dynamic DIV</title>

    <style>
    #header {position: absolute; left: 0px; top: 0px; right: 0px; background: green}
    input[type=button] {float:right;}
    #top {position: absolute; left: 0px; top: 25px; right: 0px; height: 50%; background: yellow}
    #bottom {position: absolute; left: 0px; top: 50%; right: 0px; bottom: 0px;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>
    <input id="bar" type="button" value="Bar" >
    <input id="foo" type="button" value="Foo">
    </div>

    <div id="top" >Top content</div>
    <div id="bottom" >Bottom content</div>

    <script>
    //see http://www.pinlady.net/PluginDetect/IE/
    var tmp = document.documentMode, e, isIE;
    try{document.documentMode = "";}
    catch(e){ };
    isIE = typeof document.documentMode == "number" ? !0 : eval("/*@cc_on!@*/!1");
    try{document.documentMode = tmp;}
    catch(e){ };

    if (isIE)
    {
    document.getElementById('header').style.marginTop='-10px';
    document.getElementById('header').style.height='40px';
    document.getElementById('bar').style.marginTop='11px';
    document.getElementById('foo').style.marginTop='11px';
    }
    </script>

    </body>
    </html>

  8. #8
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by molendijk View Post
    Sorry, I forgot about the IE11-issue. If you want the header to have a small height in both IE and non-IE, you could try this:
    Thank you, but I prefer a simple CSS solution.

Similar Threads

  1. Resolved website opens half way down the page?
    By mlegg in forum HTML
    Replies: 3
    Last Post: 02-10-2011, 05:31 PM
  2. Replies: 7
    Last Post: 08-04-2010, 11:00 AM
  3. Replies: 4
    Last Post: 09-17-2009, 04:00 PM
  4. Bug Can't see rest of page
    By ojsimon in forum JavaScript
    Replies: 0
    Last Post: 06-10-2009, 04:09 PM
  5. Resolved Lightbox 2.03a does not cover page content
    By easinewe in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-03-2009, 07:42 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •