kcoyner/index.html

## index.html
<body>
  <div class="content">
    my content
  </div>
  <footer class="footer">
    my footer
  </footer>
</body>

## main.css
html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}
.content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}
.footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}
	<body>
	<div class="content">
	my content
	</div>
	<footer class="footer">
	my footer
	</footer>
	</body>
	html {
	height: 100%;
	}
	body {
	display: flex;
	flex-direction: column;
	height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
	}
	.content {
	flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
	padding: 20px;
	}
	.footer {
	flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
	padding: 20px;
	}