CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

Question

I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer which I can\'t make sit at the bottom of the page.

I wa

Answer 1

I have myself been looking into this problem. I have seen quite a few solutions and each of them had issues, often involving some magic numbers.

So using best practices from various sources I came up with this solution:

http://jsfiddle.net/vfSM3/248/

The thing I wanted to achieve specifically here was to get the main content to scroll between footer and header inside green area.

here is a simple css:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}