css - How do I force a DIV block to extend to the bottom of a page even if it has no content?

Question

In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is so the vertical border still appears down the page even if there isn't any content to display.

Here is my DEMO:

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}

<form id="form1">
  <div id="header">
      <a title="Home" href="index.html" />
  </div>

  <div id="menuwrapper">
      <div id="menu">
      </div>
  </div>

  <div id="content">
  </div>
</form>

Answer 1

Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:

html,body { height:100%; }

You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.

This site has some excellent examples:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

I also recommend going to http://quirksmode.org/