JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="wrapper">
  <div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam aliquid dolorum quos ab necessitatibus quasi similique, nam, officiis. Rerum blanditiis, deleniti iure beatae nulla officiis hic fuga accusamus quidem dolorem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi in asperiores modi. Sed soluta dignissimos, nihil impedit ratione! Officiis facere unde pariatur alias beatae veritatis amet neque, vitae ea atque.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam pariatur aliquid quos quibusdam, nisi odit blanditiis natus sunt tenetur quas laborum dignissimos aut, fuga, voluptates quaerat enim minus repudiandae accusamus!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis nisi illo harum minus vero. Perspiciatis maiores repellendus labore vitae ea odio repudiandae, excepturi. Ab qui repellat expedita, ullam numquam quas.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis eum perferendis necessitatibus facere harum culpa ad autem rerum saepe. Aut, quam maxime magnam similique repudiandae. Doloribus id perspiciatis adipisci quaerat.</p>
  </div>
  <div class="footer">
    <h3>Sticky footer</h3>
    <p>Footer of variable height</p>
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  display: table;
  height: 100%;
  width: 100%;
  background: yellow;
}
.content {
  display: table-row;
  /* height is dynamic, and will expand... */
  height: 100%;
  /* ...as content is added (won't scroll) */
  /* background: turquoise; */
	background-image: url(http://juliandance.org/wp-content/uploads/2016/01/RedApple.jpg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
  overflow: scroll;
}
.footer {
  display: table-row;
  background: lightgray;
}