SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy min height 100% browser size

    hi all,

    im trying to get the min-height of my container block to work with 100%
    so its shows 100% to what browser size is..

    i have a background image in #container that has enough height (1140)no matter what browser size or whats in the container

    thing is its only showing up to content,
    what am i doing wrong?

    heres the page:
    http://bluecrushdesign.co.za/track/

    code:
    #container {
    margin: 0 auto;
    width: 837px;
    background-image:url(../images/back.png);
    height:100%;
    min-height:100%;
    }

    html>body #container{height:auto; min-height:100%;}
    * html #container {height:100%}
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  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)
    If you want the div height in &#37;, you will probably need this in the <head> as well

    Code CSS:
    <style type="text/css">
    html, body {
    height: 100%
    }
    </style>

  3. #3
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    youre a rockstar!
    thankyou!! ;-)))
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    and to tidy up do this :
    Code:
    html, body {
        height:100&#37;;
        margin:0;
        padding:0;
    }
    #container {
        margin: 0 auto;
        width: 837px;
        background:url(../images/back.png);
        min-height:100%;
    }
    * html #container {height:100%}
    No need for all that other stuff.

    See the css faq on 100% height if you are not sure why and how this is works. It's an important concept.

  5. #5
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok so 100&#37; height is ..getting it to stretch to 100% height of browser window..

    what happens if the content goes beyond the window height?
    and the rest of the background image doesnt show up (even though its long enough)

    like so:
    http://www.bluecrushdesign.co.za/track/addshipment.html
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  6. #6
    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 escapedf View Post
    ok so 100% height is ..getting it to stretch to 100% height of browser window..

    what happens if the content goes beyond the window height?
    and the rest of the background image doesnt show up (even though its long enough)

    like so:
    http://www.bluecrushdesign.co.za/track/addshipment.html
    Looks like you floated something inside your container. Use one of these methods to contain the floats. Then your container will stretch to contain. http://www.visibilityinherit.com/cod...ain-floats.php

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

    The routine will do that already

    You just haven't cleared the floats.

    Code:
    #container {
        margin: 0 auto;
        width: 837px;
        background:url(http://www.bluecrushdesign.co.za/track/assets/images/back.png);
        min-height:100&#37;;
        overflow:hidden;
    }
    * html #container {
        height:100%;overflow:visible;
    }
    Edit:



    Eric beat me to it

  8. #8
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aha!
    so i could have used pauls method adding overflow visible, and overflow hidden to code..
    or i could have added another block inside container, that floats, to contain it all..(floated parent)
    or a clear all div..

    ok got it!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You also have the double margin bug here to fix in iE6.

    Code:
    #nav {
        height: 25px;
        margin: 30px 0px 0px 600px;
        float: left;
        display:inline;
    }

  10. #10
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks! i dont think we testing for IE6 anymore -- ;-)
    but ill add that if need be!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"


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
  •