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

Add this to your CSS

html, body {
    height: 100%;
}