ricealexander/sticky_footer.css

## sticky_footer.css
/** STICKY-FOOTER CSS
  *  these styles configure a "sticky" footer
  *
  *  "sticky" footers stick to the bottom of the window
  *  when there isn't much page content,
  *  but stick to the bottom of the page
  *  when the content is bigger than the window.
  *
  *  traditional "sticky" footers use padding or calc()
  *  which require knowledge of the heights of the
  *  header and footers.
  *  this isn't ideal, as responsive sites will usually
  *  change the heights of these elements
  *
  *  modern "sticky" footers use flex or grid
  *  to circumvent this issue.
  *  these solutions have poor support in IE.
  *
  *  this solution uses flex, but has full support
  *  for IE10 and IE11.
  **/

/* RESET */
body {
  margin: 0;
}

/* "sticky" footer */
html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* avoids IE 10-11 `min-height` bug */
}
main {
  flex: 1 0 auto;
}
header, footer {
  flex-shrink: 0;
}

/* visuals */
header {
  background-color: #FF5722;
}
footer {
  background-color: #00BCD4;
}
header, main, footer {
  padding: 2em;
}

## sticky_footer.html
<!DOCTYPE html>
<html>
<head>
  <title>Footer at the bottom</title>
  <link rel="stylesheet" type="text/css" href="sticky_footer.css">
</head>
<body>
  <header>Header</header>
  <main>Content</main>
  <footer>Footer</footer>
</body>
</html>
	/** STICKY-FOOTER CSS
	* these styles configure a "sticky" footer
	*
	* "sticky" footers stick to the bottom of the window
	* when there isn't much page content,
	* but stick to the bottom of the page
	* when the content is bigger than the window.
	*
	* traditional "sticky" footers use padding or calc()
	* which require knowledge of the heights of the
	* header and footers.
	* this isn't ideal, as responsive sites will usually
	* change the heights of these elements
	*
	* modern "sticky" footers use flex or grid
	* to circumvent this issue.
	* these solutions have poor support in IE.
	*
	* this solution uses flex, but has full support
	* for IE10 and IE11.
	**/

	/* RESET */
	body {
	margin: 0;
	}

	/* "sticky" footer */
	html {
	height: 100%;
	}
	body {
	display: flex;
	flex-direction: column;
	height: 100vh; /* avoids IE 10-11 `min-height` bug */
	}
	main {
	flex: 1 0 auto;
	}
	header, footer {
	flex-shrink: 0;
	}

	/* visuals */
	header {
	background-color: #FF5722;
	}
	footer {
	background-color: #00BCD4;
	}
	header, main, footer {
	padding: 2em;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Footer at the bottom</title>
	<link rel="stylesheet" type="text/css" href="sticky_footer.css">
	</head>
	<body>
	<header>Header</header>
	<main>Content</main>
	<footer>Footer</footer>
	</body>
	</html>