How can a variable-height sticky footer be defined in pure CSS?

Question

The key to note here is the height of the footer is not going to be fixed, but will vary with its content.

When I say “sticky footer,” I use it in what I understand

Answer 1

You can absolutely do this in pure CSS. Clicky the linky.

This concept uses display: table-cell organize your page sections rather than the normal display: block.

HTML

    
Catchy header
    
Awesome content
    
Sticky footer

CSS

.Frame {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
}
.Row {
    display: table-row;
    height: 1px;
}
.Row.Expand {
    height: auto;
}