Fixed Header/Footer

A page with a header, footer, and content area that expands to fit the content, but always at least fills the display.

by syndicatedshannon

HTML

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

CSS

html, body { width: 100%; height: 100%; margin: 0; padding: 0; }

.viewport {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    border: 10px solid #2B2A29;
}
.page {
    position: absolute;
    left: 10px;
    right: 10px;
    min-height: 100%;
}
.background {
    position: absolute;
    top: 122px;
    bottom: 122px;
    background-color: #F05100;
    left: 0;
    right: 0;
    border: 1px solid black;
}
.content {
    position: relative;
    padding: 120px 0;
}
.header {
    position: absolute;
    top: 10px;
    height: 100px;
    left: 0px;
    right: 0px;
    background-color: #FFCF00;
    border: 1px solid black;
}
.footer {
    position: absolute;
    bottom: 10px;
    height: 100px;
    left: 0px;
    right: 0px;
    background-color: #2FC3E9;
    border: 1px solid black;
}

JavaScript

var linesOfText = 50;

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