/**
* Option 1Using negative paddings/margins for footer in adjacent with wrapper content with
* a push element inside
*/

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;
}

/**
* Option 2 - Same idea as option 1 but without using push element inside wrapper content
*
*/

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

/**
* Option 3 - Using calc approach
*
*/

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

/**
* Option 4 - Using flexbox approach
*
*/

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}

/**
* Option 6 - Using gird approach(experimental)
*
*/

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}