min height 100% browser size

**escapedf** · Sep 1, 2010 06:01

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%}

**Kalon** · Sep 1, 2010 06:25

If you want the div height in %, you will probably need this in the <head> as well

Code CSS:

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

**escapedf** · Sep 1, 2010 06:40

youre a rockstar!
thankyou!! ;-)))

**Paul O'B** · Sep 1, 2010 09:21

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.

**escapedf** · Sep 2, 2010 05:51

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

**PicnicTutorials** · Sep 2, 2010 05:59

Originally Posted by escapedf

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

**Paul O'B** · Sep 2, 2010 06:02

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

**escapedf** · Sep 2, 2010 06:12

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!

**Paul O'B** · Sep 2, 2010 06:15

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;
}

**escapedf** · Sep 2, 2010 06:22

thanks! i dont think we testing for IE6 anymore -- ;-)
but ill add that if need be!

User Tag List

Thread: min height 100% browser size

Thread Tools

Display

min height 100% browser size

Bookmarks

Bookmarks

Posting Permissions