Stop Bootstrap 4 footer from rising up

My bootstrap 4 footer rises up on pages where the body has less content.

Below is an image of the problem.

footer {
  background-color: white;
  color: #d5d5d5;
  padding-top: 1rem;
}
footer a {
  color: #d5d5d5;
}
hr.light-100 {
  border-top: 1px solid #d5d5d5;
  width: 100%;
  margin-top: .8rem;
  margin-bottom: 1rem;
  color: black;
}

<footer>
  <div class="container-fluid padding">
    <div class="row text-center">
      <div class="col-md-6">
        <p class="marker">blah blah blah.
        <a class="btn btn-social-icon btn-instagram">
         <span class="fa fa-instagram"></span>
        </a>
      </div>
      <div class="col-md-6">
        <p class="marker">more blah blah.
        <a class="btn btn-social-icon btn-facebook">
         <span class="fa fa-facebook"></span>
        </a>
        </p>
      </div>
      <div class="col-12">
        <hr class="light-100">
        <h5>&copy; app.com</h5>
      </div>
    </div>
  </div>

If there is anything else I have forgot to attach please let me know and I will edit the post.

I have played around with footer: sticky; / fixed; but that does not solve the problem.

The footer is also too tall but whenever I have added in a height css variable, the height is reduced however the text stays in place.

funkyheight

Thank you very much for your help.

Solution

You can use css grid.

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-auto-rows: minmax(auto, auto);
}

<body>
  <header>Header</header>
  <main>main</main>
  <footer>footer</footer>
</body>

in grid-template-rows: auto 1fr auto; auto maps to header and footer, and 1fr maps to your main content.