Body height 100% не работает

html,
body,
.wrapper, {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: auto !important;
}

Запятая ломает правило. После класса wrapper.

 html,
    body,
    .wrapper {
        margin: 0;
        padding: 0;
        min-height: 100%;
        height: auto !important;
    }

Оставь html и body в покое, это к чему min-height: 100%; height: auto !important; ?

Перепиши вот так:

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  width: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
}

Попробуйте так:

.wrapper {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}