FlexBox Footer bottom

by Alex

HTML

<header class="header"> #Header </header>
<main class="main">
  <h1>Test Swig Template</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet quod, quam consequuntur facilis at officiis consequatur reprehenderit minus quos dolorum, ullam voluptas. At harum alias nulla architecto cumque, tempora consequuntur.</p> 
</main>
<footer class="footer"> #Footer </footer>

CSS

html {
	font: 1em/normal sans-serif;
	display: flex;
}
body {
	width: 100%;
	min-height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.header {
  background: #eee;
	flex: 0 0 auto;
  padding: 10px;
}
.main {
  background: #faa;
	flex: 1 0 auto;
  padding: 10px;
}
.footer {
  background: #ddd;
	flex: 0 0 auto;
  padding: 10px;
}