JSFiddle - React, Tailwind, and code Playground

by Michael Smith

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="Container">

  <div class="Header">
    Header
  </div>

  <div class="Content">
    <div class="CloseButton"><i class="fa fa-times-circle fa-3x fa-pull-right"></i></div>
    <p>Test</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a...

CSS

.Container {
  height:100%;
  min-height:100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.Header {
  flex: 0 0 auto;
  border-bottom: 1px solid #7f7f7f;
  height: 30px;
}

.Content {
  flex: 1 1 auto;
  overflow-y: scroll;
  background-color: black;
  color: white;
}

.CloseButton {
  padding: 5px;
  color: #7f7f7f;
}

.Footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #7f7f7f;
  height: 100px;
  text-align: center;
  padding-bottom: 15px;
}