JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="wrapper">
  <div class="content"></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: flex;
	flex-direction: column;
  height: 100%;
  width: 100%;
  background: yellow;
	overflow: hidden;
}

.content {
	flex: 1;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	background-image: url(http://juliandance.org/wp-content/uploads/2016/01/RedApple.jpg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: grey;
}

.footer {
	flex: 1;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;	
	background-color: green;
}

.footer.hide {
	height: 0;
}

JavaScript

$('.wrapper').on('click', function() {
    $('.footer').addClass('hide');
});