CSS Min-Height Not Working On All Browsers

Question

I have been working on a site lately. I am attempting to get a border that surrounds all my content and is at least as tall as the page is. My #Container is the div that should expand to fill the full page. I am attempting to use the min-height:100%; in my css, but for some reason it isn't expanding the border down the whole page. This is my website. The home page is a basic html setup.

<div id="Container">
  <div id="header">
    <div id="menu">
        <ul id="navbar">
            <li><a id="nav1" class="nav-text" href="http://usedatcollege.com/">Home</a></li>
            <li><a id="nav2" class="nav-text" href="http://usedatcollege.com/bookdb.php">Books</a></li>
            <li><a id="nav3" class="add-text" href="http://usedatcollege.com/bookdbform.php">+</a></li>
            <li><a id="nav4" class="nav-text" href="http://usedatcollege.com/wanteddb.php">Wanted</a></li>
            <li><a id="nav5" class="add-text" href="http://usedatcollege.com/wanteddbform.php">+</a></li>
            <li><a id="nav6" class="nav-text" href="#">Info</a></li>
            <li><a id="nav7" class="nav-text" href="#">About</a></li>
            <li><div id="nav8"><a href=loginform.php class=linktext>Login</a><a class=slashtext>/</a><a href=register.php class=usertext>Register</a></div></li>
        </ul>
     </div>
  </div>    
  <div id="content">
    <h3>Home Page</h3>
  </div>
  <div id="footer">
    <div id="footertext">Copyright &copy; UsedAtCollege.com</div>
  </div>
</div>

My CSS is fairly simple too. I have a CSS reset, that I don't think is affecting it because I took it out and it still had the problem.

* { 
  margin: 0; 
  padding: 0; 
}
#Container {
  width:980px;
  min-height:100%;
  margin-left:auto;
  margin-right:auto;
  margin-top:0px;
  border-style:solid;
  border-width:1px;
  border-color:rgb(154,154,154);
}

So that's the CSS control for the div wrapping my entire page in.

I just want to know if anyone knows why the min-height is not getting the border down all the way to the bottom of the screen?

Answer 1

Something like Firebug or DOM-Inspector would come in handy in such cases. If you fire up Firebug, and see the content of your page in Firebug, you will notice that your body itself doesn't expand through the entire page, it expands only upto around half the page length, the same position where the bottom border is showing. This is because the body will expand only as per its content, the content being minimal here, the body expands only as much, and so does the min-height: 100%.

You can get around this by wrapping the entire page content inside an absolutely positioned wrapper div, setting its top and left values to 0px, and height and width to 100%. Then the border would expand upto the bottom of the page. Of course Firebug would still show the body expanding upto half page only, for absolutely placed elements don't contribute to the natural dimensions. For that, you will have to use relative positioning, and adjust margin-top to the requisite value in order to have the effect.

Answer 2

Add this to your CSS

html, body {
    height: 100%;
}