title: Chatbox layout with fixed header and footer
body: <p>I am trying to figure out a way to have my chatbox layout with a fixed header at the top and a fixed footer at the bottom all the while having the chatbox body scrollable and nests right up to both the fixed header and footer. I have tried a few different ways but still can't seem to get it just right and clean. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.chat-head  {    
      background: red;
      position: fixed;
      top: 0;
      width:100%;
  }
  .chat-body  {
      position: relative;
      overflow-y: scroll;
      height: 93vh;
      margin: 25px 0;
      background:green;
  }
  .chat-foot {    
      background: blue;
      position: fixed;
      bottom: 0;
      width:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col chat-head"&gt;
    One of three columns
  &lt;/div&gt;
    &lt;div class="w-100 d-none d-md-block"&gt;&lt;/div&gt;
  &lt;div class="col chat-body"&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;chat&lt;br&gt;
  
  &lt;/div&gt;
    &lt;div class="w-100 d-none d-md-block"&gt;&lt;/div&gt;
  &lt;div class="col chat-foot"&gt;
    One of three columns
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my JSFiddle: <a href="https://jsfiddle.net/aLysfspo/1/" rel="nofollow noreferrer">https://jsfiddle.net/aLysfspo/1/</a></p>