JSFiddle - React, Tailwind, and code Playground

by 2Yootz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="chat">


<fieldset  class="d-flex flex-column">
  <div class="area-top">
    main content: fills remaining space
    <!-- -->
  </div>
  <div class="area-bottom">
    footer: fixed height in px
  </div>
</fieldset></div>

CSS

section {
  height: 100%;
}
header {
  background: tomato;
}
.area-top {
flex:1;
  background: gold;
}
.area-bottom {
  background: lightgreen;
  
}
.chat {
  height:400px;
}