div tags height 100%

[SRD]

Okay, so I am in the process of switching my site's layout over from tables to div tags and I've run into a problem. I want the pages of my site to always stretch to 100% of the browser's height, and overflow past that if necessary. For some reason, when I set the div height to 100% and the page overflows, what I get in Firefox is the content with the border of the div cutting through the middle. When I do not declare a height attribute, the content overflows perfectly, however, on pages where the content is much shorter, the page will of course not stretch to 100%. After researching for similar problems, it appears to me that some sort of css is needed in the head of the document (something about declaring the parent/body as 100%, also some kind of minheight hack?), but even after trying several things, nothing seems to work.

Also, this is probably very obvious, but the div's seem to be stretching to the height of the browser, even though they are under a banner, so the entire height of the page is actually 100% of the browser height + banner height (Something I also need to fix).

[PeejAvery]

A site with table needs very little CSS, a site with div tags requires CSS. That is why often sites are called "Table sites" vs. "CSS site." In order to get 100% perfectly a div must have a couple of styles applied. Here are some hints to help you out.

First, the body margin must be set. Second, for all div tags less than 20 pixels in height, IE requires that you specify a smaller font size. A div tag set to block display will act like it has a break before and after. An inline div tag will not have those breaks. For more information check out W3Schools CSS Reference (http://www.w3schools.com/css/css_reference.asp).

styles.css
body {
margin: 10px;
}

.maindiv {
width: 780px;
height: 100%;
display: block;
}

.divlessthan20px {
width: 780px;
height: 5px;
display: block;
}

[SRD]

Argh! I've been struggling with minheight hacks for an hour. I see that when I use min-height:100%; in maindiv, the site behaves perfectly in Firefox. When I use height:100% instead, the site behaves perfectly in IE. When I try to use a min-height hack, both sites then correctly display a minimum height of 100%, but the overflow in Firefox get's screwed up to where the border cuts through the content at the original 100% instead of expanding to the new height of the content. Is there some way around this?

[PeejAvery]

Can you post a sample source that reacts as you have specified? Then we can work with that.