JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<header>
  this is the header
</header>
<div id="content">
  this is the content
</div>
<footer>
  this is the footer
</footer>

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

footer,header, #content {
  width: 100%;
}

$header: 45px;
$footer: 50px;

footer {
  position: absolute;
  bottom: 0;
  height: $header;
  background: green;
}

header {
  height: $footer;
  background: red;
}

#content {
  position: absolute;
  top: $header;
  bottom: 50px;
  background: blue;
  //height: 100%
  //height: calc(100vh - ($header + $footer));
}