how to keep footer always visible and always at bottom no matter the contents dimensions

I need to keep the footer always visible in my page, no matter how long the page contents is. The following code might have some inconsistences but it keeps the footer always visible, but the contents is not show entirely if the browsers size is small... how can I solve this?

here is what I did:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="./main.css">
  <script type="text/javascript" src="./jquery-3.2.1.js"></script>
  <script type="text/javascript" src="./main.js"></script>

  <style>
    html,
    body {
      height: 100%;
    }

    body {
      min-height: 100%; 
      position: relative; 
      padding-bottom: 72px;
    }

    #page-content {
      flex: 1 0 auto;
    }

    #footer {
      position: fixed; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      height: 72px;
    }

    body {
      background: #005ec2;
      background: linear-gradient(to right, #004aac, #4db7fd);
    }

  </style>
</head>

<body class="d-flex flex-column">
  <div id="page-content">
    <div class="container text-center">
      <div class="row justify-content-center">
        <div class="col-md-7">
          <h1 class="font-weight-light mt-4 text-white">Prueba de Footer siempre visible</h1>
          <p class="lead text-white-50">
            Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies,
            in sapien placerat consequat luctus et integer. Augue metus et
            litora tristique curabitur, sodales nisl aliquam elementum commodo,
            aptent bibendum odio vivamus. Vulputate torquent ornare dis non
            sociosqu parturient platea aliquet arcu, leo convallis enim porttitor
            tempor magna molestie nulla augue vestibulum, mus ad commodo nisi ante
            nisl fusce ac. Nunc rutrum fringilla placerat augue bibendum platea
            condimentum sed, risus nascetur dapibus integer etiam cursus.
            Feugiat velit leo viverra ridiculus varius et hac class convallis
            venenatis auctor netus, eu risus aptent morbi mollis urna ante
            tristique tincidunt vehicula. Lacus morbi potenti praesent nisi
            rutrum taciti convallis, mus urna neque pharetra at aliquam, dui
            semper non torquent purus proin. Penatibus curabitur velit placerat
            pellentesque magnis magna conubia sed eros, convallis malesuada
            vestibulum ante proin ut cum quisque feugiat venenatis, augue
            dignissim iaculis sem imperdiet metus per a. Nec tincidunt
            lobortis habitant hac nostra per risus nisl morbi, taciti pellentesque
            consequat donec egestas odio sem duis, iaculis natoque
            fames suscipit at orci faucibus lacus.
          </p>
        </div>
      </div>
    </div>
  </div>
  <footer id="footer" class="py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy; 2019</small>
    </div>
  </footer>
</body>

Solution

If you want a FIXED bottom footer, the bottom padding (that counteracts the footer height) should be on the #page-content instead of the body...

body {
  min-height: 100%; 
  position: relative; 
}

#page-content {
  flex: 1 0 auto;
  padding-bottom: 72px;
}

https://www.codeply.com/go/9bT3w9BkgK

If you want a STICKY bottom footer (content "pushes" the footer down) see: https://stackoverflow.com/a/45919356/171456