SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Marbach
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy DIV in DIV - both 100% height

    Hi community,

    I've got a strange problem: The content DIV is wrapped by an DIV with 100% width.

    The wrapper works fine and fills the whole browser height but the content DIV just wants to go as high as the content is. It's getting me sick...

    Does anybody have a hint ?

    Here's the simplified code:

    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    html, body {
    height: 100%;
    }
    div#wrapper {
    background: #eee;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;
    width: 950px;
    }
    div#page {
    background: #fff;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;
    width: 850px;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="page">
    Menu | Content
    </div>
    </div>

    Thanks.
    Ralf

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css"> 
    * { 
    margin: 0; 
    padding: 0; 
    } 
    
    html, body { 
    height: 100%; 
    } 
    
    div#wrapper { 
    background: black; 
    border: 1px solid red; 
    height: 100%; 
    margin: 0 auto; 
    width: 950px; 
    } 
    
    div#page { 
    background: white; 
    border: 1px solid blue; 
    height: 100%; 
    margin: 0 auto; 
    width: 850px; 
    } 
    
    </style> 
    </head> 
    <body> 
    
     <div id="wrapper"> 
             <div id="page">
                    Menu | Content
             </div> 
     </div>
     
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Marbach
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks. That would work, but breaks if the text is longer than the browser height. A scrollbar is shows but when you scroll down, the wrapper stops at 100%.

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rabele View Post
    Hi, thanks. That would work, but breaks if the text is longer than the browser height. A scrollbar is shows but when you scroll down, the wrapper stops at 100%.
    That's the way it's supposed to work based on the information in your original post.

    If you have a different scenario, then you need to explain the details of what that scenario is and what the desired outcome is.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rabele View Post
    Hi, thanks. That would work, but breaks if the text is longer than the browser height. A scrollbar is shows but when you scroll down, the wrapper stops at 100%.
    Hi, you need to repeat y a background image on the container. Or drop in another div to hold the background color. Give the div position absolute and top/bottom 0

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Please read the CSS faq on 100&#37; height before attempting this as you cannot nest multiple 100% high elements and you cannot base height on an element that has min-height either.

    (BTW don't use the important hack for 100% height either as IE7 breaks badly with it. Just use the star selector hack for iE6 instead It's less code and 100% safe. )

    You can only ever have one 100% high element in your page and that is the first min-height:100% element (#wrapper in your case). You have one shot at creating 100% high effects and they must all be done on this element.

    You can as Eric suggests repeat a background image on #wrapper to give you the faux column 100% high effect.

    In your original example if you are just looking for gray borders then do it all in one div and use borders for the outer colour.

    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    html, body {
        height: 100%;
    }
    #wrapper {
        background: #fff;
        min-height: 100%;
        margin: 0 auto;
        width: 850px;
        border-right:50px solid #eee;
        border-left:50px solid #eee;
    }
    * html #wrapper {
        height:100%
    }
    </style>
    </head>
    <body>
    <div id="wrapper"> Menu | Content </div>
    </body>
    </html>
    There are other methods of creating 100% backgrounds but are a little complicated.

    (Also don't call everything div#wrapper, div#page as Ids are unique and that's just a waste of code. Just use #wrapper and #page etc as it is unlikely that you want to isolate the id by its type selector anyway.)


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
  •