Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    100% height css issues

    I think I'm missing something simple here. I'm trying to have a fluid background in height, but the html and body tags get cut off at the 100% height of the screen. Here's the code I'm trying to use:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <style type="text/css">
    * {padding: 0;margin: 0;}
    html, body {height: 100%;}
    body {background: #fff url(images/bg.gif) top left repeat-x; font-family: Arial, Helvetica, sans-serif; font-size: 12px; position: relative;}
    #Wrap {background: url(images/bg_wrap.png) top left repeat-y; width: 896px; min-height: 100%; height: auto !important; height: 100%; padding: 0px 6px 0 4px; margin: 0 auto; overflow: hidden; _overflow: visible;}
    #btmWrap {background: url(images/bg_btm.png) bottom left repeat-x; width: 100%; height: 1596px; position: absolute; bottom: 0; left: 0; z-index: -10;}
    #characters {background: url(images/bg_characters.png) bottom center no-repeat; width: 100%; height: 725px; position: absolute; bottom: 0; left: 0; z-index: -15;}
    </style>
    </head>
    <body>
    <div id="Wrap">
    
    </div>
    <div id="btmWrap">
      <div id="characters"></div>
    </div>
    </body>
    </html>
    Now I want the #Wrap div to span across 100% height and expand if the content is higher while the html/body tags expand as well. Am I missing something or this can't be done?

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    How about giving the html and body a min-height:100%?
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Frankie View Post
    How about giving the html and body a min-height:100%?
    Tried that. That worked for the backgrounds, but would take the 100% height off the #Wrap container div. Any other suggestions?

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    I thought that would be a quick fix, but now that it isn't, the only thing I can suggest is to go through the third tutorial on my signature page. That covers all types of 100% height, not just a sticky footer.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    You are using position: absolute; which is not considered content. Therefore you essentially have nothing on the page. The height is 100%, because you set it to that in your css. The other heights ( with position: absolute; ) mean nothing to the body tag. Try taking out all the position: absolute; out, you shouldn't have to use it anyways.
    Last edited by Sammy12; 02-07-2012 at 11:04 PM.


  •  

    Posting Permissions

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