Fixed Header/Footer w/o Viewport

A page with a fixed-size header and footer, and a content background area that always uses the remaining space.

by syndicatedshannon

HTML

<div class="background"></div>
<div class="content"></div>
<div class="header"></div>
<div class="footer"></div>

CSS

html {
    position: absolute;
    height: 100%;
    left: 10px;
    right: 10px;
    overflow: auto;
    margin: 0;
    padding: 0;
}
body {
    position: relative;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
.background {
    position: absolute;
    top: 120px;
    bottom: 120px;
    background-color: red;
    width: 100%;
}
.content {
    position: relative;
    padding: 120px 0;
}
.header {
    position: absolute;
    top: 10px;
    height: 100px;
    width: 100%;
    background-color: yellow;
}
.footer {
    position: absolute;
    bottom: 10px;
    height: 100px;
    width: 100%;
    background-color: cyan;
}

JavaScript

var linesOfText = 50;

$(function () {
    for (var i = 0; i < linesOfText; i++) {
        $(".content").append("text<br />");
    }
});