#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2008
    Posts
    3
    Rep Power
    0

    Unhappy 100% height parent and child


    Hi,
    I swear I had this working before but somehow its broken and I can't figure out why! =(
    I want a 100% height/width parent(#wrapper) with a sticky bottom footer and a content container(#body) with a fixed width, margin:auto and 100% height to meet the footer.
    All is working apart from my #body doesn't have a 100% height.

    Code:
    #wrapper { 
      width:100%; 
      height:100% !important;
      height:auto !important;
      min-height:100% !important; 
      position:relative; 
    } 
    #body {
      width:1160px;
      height:100% !important;
      height:auto !important;
      min-height:100% !important;
      margin:0 auto 0 auto;
    }
    #footer {
      width:100%;
      height:50px;
      bottom:0;
      left:0;
      position:absolute;
    }
    Code:
    <div id="wrapper">
    
       <div id="body></div>
       <div id="footer> </div>
    
    </div>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2012
    Posts
    7
    Rep Power
    0
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
    <title>Fixed header and footer</title>
    <style type="text/css">
    body{
    margin:0;
    padding:header-<length> 0 footer-<length> 0;
    }
    div#header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background:#0F0
    }
    div#footer{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    background:#0F0
    }
    @media screen{
    body>div#header{
    position:fixed;
    }
    body>div#footer{
    position:fixed;
    }
    }
    * html body{
    overflow:hidden;
    }
    * html div#content{
    height:100%;
    overflow:auto;
    }
    </style>
    <div id="header"> header </div>
    <div id="content"> content</div>
    <div id="footer"> footer </div>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2012
    Posts
    7
    Rep Power
    0
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <title>Fixed header and footer</title> <style type="text/css"> body{ margin:0; padding:header-<length> 0 footer-<length> 0; } div#header{ position:absolute; top:0; left:0; width:100%; height:50px; background:#0F0 } div#footer{ position:absolute; bottom:0; left:0; width:100%; height:50px; background:#0F0 } @media screen{ body>div#header{ position:fixed; } body>div#footer{ position:fixed; } } * html body{ overflow:hidden; } * html div#content{ height:100%; overflow:auto; } </style> <div id="header"> header </div> <div id="content"> content</div> <div id="footer"> footer </div>

IMN logo majestic logo threadwatch logo seochat tools logo