JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="navbar navbar-inverse navbar-fixed-top"></div>    
<div class="container">
    <div class="content-container">
        <div class="my_content">Full height ??</div>
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</div>

CSS

html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  padding-top: 50px;
}
.container {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.content-container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
  min-height: 100%;
  margin-bottom: -60px;
}
.footer {
  position: relative;
  width: 100%;
  background-color: red;
}
.footer,
.push {
  height: 60px;
}
.my_content {
    border: 1px dotted;
    width: 100%;
    height: 100%;
    min-height: 200px;
    min-width: 300px;
}