Sticky Footer

by ashleycam3ron

HTML

<html>

  <body>
    <section>
      <header>
        <h1>Entry Title</h1>
      </header>
      <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis posuere risus, eu finibus leo pellentesque sed. Mauris tincidunt feugiat rhoncus. Proin quis purus eget odio facilisis pellentesque.
        </p>
      </article>
    </section>
    <footer>
      <div class="container">
        &copy;2020 All Rights Reserved.</div>
    </footer>
  </body>

</html>

CSS

html {
  font-family: Arial,Helvetica, sans-serif;
  position: relative;
  min-height: 100%;
  padding:0;
  margin:0;
}

body {
  height: 100%;
  padding: 0;
  margin-bottom: 60px; /* footer height */
}

footer {
  background: #eee;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* footer height */
  line-height: 60px; /* footer height */
}

.container {
  max-width: 500px;
  padding: 0 15px;
}