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 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    100% height in CSS?

    I have a div just inside my body. That div has a bg image. But the extent of the div depends on what's in the div. The problem is that sometimes if there is not much stuff in that div, the background will not reach the bottom of the window. How do I make sure that the div's bg will always reach the bottom of the window?

    (The reason im doing the bg in the div and not in body is because i already have a bg in body and the div bg is a transparent tile.)

  • #2
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Can we see a code or a link to help you?

    I'm not sure I really understand your first part.

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No link, sorry

    And the code is messy so i'll reproduce a simplified version here:

    Code:
    <body>
    <div class="maindiv">
    not very much content in here.
    </div>
    </body>
    Code:
    .maindiv{
    	background: url('bg2.gif') repeat;
    	width: 100%;
    }
    
    body {
    	background: url('bg1.gif') repeat;
    }
    The problem is that since there is not much content in the div, the div's height will be less than the browser window's height. Therefore, the background (bg2.gif) will not tile all teh way down to the bottom of the window. But I need it to.
    Last edited by rustyofco; 11-03-2008 at 02:29 AM.

  • #4
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Seems to me that you could just set the width and height, instead of 100% to whatever you want. For example, if the image is 50px by 50px and you want it to repeat like 2 times, just set the width to 100 and the height to 50

    Code:
    <body>
    <div class="maindiv">
    not very much content in here.
    </div>
    </body>
    Code:
    .maindiv{
    	background: url('bg2.gif') repeat;
    	width: 100;
                 height: 50;
    }
    
    body {
    	background: url('bg1.gif') repeat;
    }

  • #5
    New Coder
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I cant do that. I want the div to fill up the window. I cant leave the height defined. If it's too low, then if there is a lot of content in the div, the contents will spill out of the bg. Also, if the user's window is very tall, the bg will not stretch all the way down.

    On the other hand, if i set the height too big, if there is not a lot of content in hte div, there will be useless vertical scrolling.

    The content in the div is dynamic btw.

  • #6
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    First let me get something straight. The bg image is repeated. So won't the bg image always reach the bottom of the div anyway?

  • #7
    New Coder
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It'll reach the bottom of the DIV but not necessarily the bottom of the WINDOW. I need it to fill the window.

  • #8
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Oh, I'm following you now. I had that same exact problem. Sorta.... http://http://www.codingforums.com/s...d.php?t=151390

    Use height: auto;
    Last edited by GardenGnome2; 11-03-2008 at 03:06 AM.

  • #9
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>100% Height</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    height:100%;
    background: #FFF url(bg1.gif);
    }
    .maindiv {
    background: url(bg2.gif);
    min-height:100%;
    }
    * html .maindiv { /* this is needed to fake min-height in IE 6 */
    height:100%;
    }
    </style>
    </head>
    <body>
    <div class="maindiv"> not very much content in here. </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    oesxyl (11-04-2008)


  •  

    Posting Permissions

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