JSFiddle - React, Tailwind, and code Playground

by Timoleon Pagounas

HTML

<div class="wrapper">
  <div class="container">
    <div class="top-div">
      topd div
    </div>
    <div class="bottom-div">
      bottom div
    </div>
  </div>
</div>

CSS

.wrapper {
  float: left;
  height: 100%;
}

.container {
  position: absolute;
  display: block;
  float: left;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.top-div {
  margin: 5px;
  float: left;
  position: fixed;
  top: 0;
  width: 90%;
  height: 30%;
  background-color: red;
}

.bottom-div {
  margin: 5px;
  position: absolute;
  float: left;
  bottom: 0;
  width: 90%;
  background-color: green;
}

JavaScript

$(function() {
  var containerH = $(".container").height();
  var topdivH = $(".top-div").height();
  $(".bottom-div").height(containerH - topdivH);
});