Header/Footer CSS Colution

by _stephan_

HTML

<div class="l-fit-height">
    <div class="l-fit-height-row">
        <div class="l-fit-height-row-content hdr" style="background-color: yellow">Header<br>Row2</div>
    </div>
    <div class="l-fit-height-row-expanded">
        <div class="l-fit-height-row-content l-scroll">
            <div class="l-scroll-content" style="background-color: green">
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
            </div>
        </div>
    </div>
    <div class="l-fit-height-row">
        <div class="l-fit-height-row-content" style="background-color: red">Footer<br>Row2</div>
    </div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.l-fit-height {
    display: table;
    height: 100%;
    width: 100%
}
.l-fit-height-row {
    display: table-row;
    height: 1px;
}
.l-fit-height-row-content {
    /* Firefox requires this */
    display: table-cell;
}
.l-fit-height-row-expanded {
    height: 100%;
    display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
    height: 100%;
    width: 100%;
}
.l-scroll {
    /* Firefox requires this to do the absolute positioning correctly */
    display: inline-block;
    overflow-y: auto;
    position: relative;
}
.l-scroll-content {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}