Footer always on bottom

footer-always-on-bottom.markdown

Footer always on bottom

A Pen by Charles Ojukwu on CodePen.

License.

index.html

<div class="container">
  <header class="hero">
    <div class="text">
      <h1>Website Name</h1>
      <p>Awesome and unique tagline.</p>
    </div>
    
  </header>
  <main class="main">
    <div class="card">
      <h2>Notes</h2>
      <p>This pen shows a method to keep the footer at the bottom of a page even when the content doesn't push it that far. Resize the window to see it in action.</p>
      <p>This particular fix requires the height of the footer to be a known value. </p>
    </div>
    <div class="card">
      <h2>Sample Text</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque praesentium, qui accusantium incidunt eos laboriosam vitae aspernatur quasi eum quam?</p>
      <p>Harum delectus ipsum minima odit voluptatum temporibus, molestiae ab vel inventore tempora eligendi, voluptates et, perferendis laudantium repellendus, commodi aspernatur.</p>
      <p>Dolorem provident ex pariatur, aperiam, nesciunt nulla numquam beatae ullam repudiandae hic porro voluptate ratione, inventore voluptas, architecto maiores blanditiis!</p>
      <p>Voluptatum, vel eaque porro maiores, fugit repudiandae, culpa corporis, neque possimus dolores alias ut rem facilis dicta perferendis aliquid eum.</p>
      <p>Reprehenderit aperiam consequuntur accusamus harum impedit delectus ea dolore dicta, perferendis cupiditate accusantium temporibus facilis numquam velit eum, error dolorem!</p>
    </div>
  </main>
  <div class="spacer"></div>
  <footer class="footer">&copy; 2017 Website</footer>
</div>

style.css

*,*:before,*:after {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  background: #eee;
  color: #222;
  font-family: "Open-Sans", Helvetica, Arial, Sans-serif;
}

.container {
  min-height: 100vh;
  position: relative;
}

.hero {
  height: 200px;
  background: #08f;
  display: table;
  width: 100%;
  text-align: center;
}

.hero .text {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
}

.footer {
  background: #fff;
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 0 1em;
  height: 40px;
  line-height: 40px;
}

.main {
  max-width: 800px;
  padding: 1em;
  margin: 0 auto;
}

.card {
  padding: 1em;
  margin-bottom: 1em;
  background: #fff;
  box-shadow: 0px  1px 2px rgba(0,0,0,0.2);
}

.card:last-child {
  margin-bottom: 0;
}

.spacer {
  height: 40px;
}