Cross Browser Sticky Footer Flexbox

.app {  
  //use whatever element is surrounding your app, as it must be a direct parent of header, footer and main
  height: 100%;
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none; 
}

main {
  flex: 1 0 auto; 
  width: 100%;
}

main::after {
  content: '\00a0'; /*   */
  display: block;
  height: 0;
  visibility: hidden;
}
  
/* Based on https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css*/