JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">header</div>
<div class="content">
  <img src="http://www.virtual-life.net/test/assets/img/cow.png"/>
  <div class="text">hier je tekst e.d. onderaan<br />En blijft onderaan ook bij meerdere zinnen</div>
</div>
<div class="scrollContent">Content die je alleen ziet als je scrolled</div>

CSS

html, body {
  height: 100%;
  width:  100%;
  margin: 0px;
  padding: 0px;
}

.header {
  height: 55px;
  position: fixed;
  background-color: grey;
  width: 100%;
  z-index: 9;
}

.content {
  position: absolute;
  top: 55px;
  bottom: 0px;
  width: 100%;
}

.content img {
  display: block;
  height: 100%;
  margin: 0px auto;
}

.scrollContent {
  width: 100%;
  background-color: #ccc;
  position: absolute;
  top: 100%
}

.text {
  position: absolute;
  bottom: 0px;
}