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

Question

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>

Carol Skelly · Accepted Answer · 2019-07-22T16:40:11.230

1

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

edited Jul 22 '19 at 16:40

answered Jul 22 '19 at 15:52

Carol Skelly

351,302
90
710
624

You just nail it. I want it the footer not to be sticky, but to be always visible. I thank you, you saved my day. – assembler Jul 22 '19 at 17:30

score 0 · Answer 2 · answered Jul 22 '19 at 16:07

If I'm understanding your question right, you want to prevent the footer from overlapping the rest of the content, right?

The approach I'd take is to make the body never scroll. Put all your page content besides the footer into a div and give that div a scrollbar.

<!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 {
      height: 100%;
    }

    body {
        margin-top: 0; 
        margin-bottom: 0;
      height: 100%; 
    }

    #page-content {
      flex: 1 0 auto;
      height: calc(100% - 72px);
      overflow-y: auto;
    }

    #footer {
      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>

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

2 Answers2