A Pen by Matt Morgan.

FEqnv.markdown

FEqnv

A Pen by Matt Morgan on CodePen.

License.

index.html

<div class="table">
  <div class="table-row">Header</div>
  <div class="table-row table-row--expanded">
    <div class="table">
      <div class="table-cell">
        <div class="content">Content</div>
      </div>
    </div>
  </div>
  <div class="table-row">Footer</div>
</div>

style.css

body, html {
  margin:0;
  padding:0;
  height:100%;
}
.table {
  display:table;
  width:100%;
  height:100%;
}
.table-row {
  display: table-row;
  height: 1px;
}
.table-row--expanded {
  height: auto;
}
.table-cell {
  display:table-cell;
}
.content {
  height: 100%;
  max-width: 500px;
  margin: 0 auto;
  background: #000;
  color:#fff;
}