How To Create A Sticky Footer Example

<!DOCTYPE html>
<html>
<head>
<title>Sticky Footer Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 0;
    background-color: #f8f9fa;
  }
  
  .content {
    /* Lots of padding to simulate a long page of content */
    padding: 20px;
    padding-bottom: 200px; /* Extra space so we can scroll past */
    height: 1500px; /* Force page to be scrollable */
  }

.sticky-footer {
    background-color: #343a40;
    color: white;
    padding: 15px 20px;
    text-align: center;
    font-weight: bold;
    
    /* The CSS Sticky Magic */
    position: sticky;
    bottom: 0;
    
    /* Ensure it sits above scrolling content */
    z-index: 100;
  }
</style>
</head>
<body>

<div class="content">
  <h2>Sticky Footer Demo</h2>
  <p>This page is very tall so you can scroll down.</p>
  <p>Notice how the dark footer below is "stuck" to the bottom edge of your screen, no matter how far up you are currently scrolled!</p>
</div>

<footer class="sticky-footer">
  I am a Sticky Footer!
</footer>

</body>
</html>