JSFiddle - React, Tailwind, and code Playground

by James Connolly

HTML

<div class="header">header</div>
<div class="container">
    <div class="cont_elements">
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
        <div class="element">......</div>
    </div>
</div>
<div class="footer">footer</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.header,
.footer {
  padding: 30px;
  background: pink;
}

.header {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
}

.container {
  height: 100vh;
  position: relative;
  background: gold;
}

.cont_elements {
  overflow-y: scroll;
  height: 100%;
}

.element {
  position: relative;
}