<body><div class="wrapper">content<div class="push"></div></div><footer class="footer"></footer></body>
html, body {height: 100%;margin: 0;}.wrapper {min-height: 100%;/* Equal to height of footer *//* But also accounting for potential margin-bottom of last child */margin-bottom: -50px;}.footer,.push {height: 50px;}
<body><div class="content">content</div><footer class="footer"></footer></body>
html {height: 100%;}body {min-height: 100%;display: flex;flex-direction: column;}.content {flex: 1;}