Footer problem with Helix templates

When the main content is not full enough the footer is in the middle of the viewpoint. It looks really bad.
I always have to add this css to fix the problem.

html,
body {
  height: 100%;
  margin: 0;
}

body.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh; // Ensure the body takes up the full viewport height
}

.body-wrapper {
  flex: 1 0 auto; // Allow the .body-wrapper to grow and push the footer down
  display: flex;
  flex-direction: column;
}

#sp-main-body {
  flex: 1 0 auto; // Allow the #sp-main-body to grow and push the footer down
}

#sp-footer {
  flex-shrink: 0; // Prevent the footer from shrinking
}