Sticky Footer with CSS Only

By Rafi

How do I use This?

A footer that sticks to the bottom of the page no matter how tall or short the page is. Overflow will scroll.

HTML

<div class="sticky-footer-css">
  <div class="row expanded flex-dir-column">
    <div class="columns shrink header text-center">
      <p>Header</p>
      <ul class="menu align-center">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
      </ul>
    </div>
    <div class="columns sticky-footer-css-body text-center">
      <p>Body Content</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse beatae aspernatur tempore similique enim, doloribus et ullam quam itaque sit! Molestias, perspiciatis omnis illo aliquam dignissimos laborum iste? Autem, esse?</p>
     <p> <img src="https://placeholder.pics/svg/300x300/1797FF-773BFF" alt="" />
      <img src="https://placeholder.pics/svg/300x300/1797FF-773BFF" alt="" />
      <img src="https://placeholder.pics/svg/300x300/1797FF-773BFF" alt="" /></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse beatae aspernatur tempore similique enim, doloribus et ullam quam itaque sit! Molestias, perspiciatis omnis illo aliquam dignissimos laborum iste? Autem, esse?</p>
    </div>
    <div class="columns shrink footer text-center">
      <p>Footer</p>
      <ul class="menu align-center">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
      </ul>
    </div>
  </div>
</div>

.sticky-footer-css {
  height: 100vh;
  display: flex;
}

.sticky-footer-css-body {
  overflow: auto;
}

// Styles for demo
// -------------------------------------------------
$slate-gray: #2c3840;

.sticky-footer-css {
  .header {
    background-color: $slate-gray;
    height: 10rem;
    color: #fff;
    padding: 3rem;

    .menu a {
      color: #fff;
    }
  }

  .body-content {
    background-color: #fff;
  }

  .footer {
    height: 10rem;
    background-color: $slate-gray;
    color: #fff;
    padding: 3rem;

    .menu a {
      color: #fff;
    }
  }
}

.sticky-footer-css {
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.sticky-footer-css-body {
  overflow: auto;
}

.sticky-footer-css .header {
  background-color: #2c3840;
  height: 10rem;
  color: #fff;
  padding: 3rem;
}

.sticky-footer-css .header .menu a {
  color: #fff;
}

.sticky-footer-css .body-content {
  background-color: #fff;
}

.sticky-footer-css .footer {
  height: 10rem;
  background-color: #2c3840;
  color: #fff;
  padding: 3rem;
}

.sticky-footer-css .footer .menu a {
  color: #fff;
}

Sticky Footer with CSS Only

By Rafi

Portfolio Resume Scrolling Container

Marketing Site 3-up Feature Section

Profile Card with Action Icons

Sticky Footer with CSS Only

By Rafi

Similar Building Blocks

Portfolio Resume Scrolling Container

Marketing Site 3-up Feature Section

Profile Card with Action Icons