Min height 100% browser size

HTML & CSS
1

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

thanks! i dont think we testing for IE6 anymore – :wink:
but ill add that if need be!

3

You also have the double margin bug here to fix in iE6.


#nav {
    height: 25px;
    margin: 30px 0px 0px 600px;
    float: left;
    [B]display:inline;[/B]
}
4

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!

5

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/code/contain-floats.php

6

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

7

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

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

and to tidy up do this :


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.:slight_smile:

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

9

Hi,

The routine will do that already :slight_smile:

You just haven’t cleared the floats.


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

Eric beat me to it :slight_smile:

10

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