JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="ie-fixMinHeight">
 <div class="container wrap d-flex flex-column">
      <div class="header row">
        Header
      </div>
      <div class="content d-flex flex-column">
         <div class="row content-top">
             <div class="col">
               Content-Top
             </div>
         </div>
         <div class="row align-items-center content-remaining">
             <div class="col">
               Content-Center
             </div>
         </div>
      </div>
      <div class="footer row mt-auto">
       Footer
      </div>
 </div>
</div>

CSS

.ie-fixMinHeight {  /* IE10+ min-height does not work with flexbox */
    display:flex;
}
.wrap {
  background:blue;
  min-height:100vh;
}
.header {
  background:yellow;
  height:50px;
}
.content {
  background:green;
  flex: 1 1 auto;
}
.content-top {
  background:lightgreen;
  height:150px;
}
.content-remaining {
  flex: 1 0 auto;
  background:darkgreen;
}
.footer {
  background:red;
  height:50px;
}