Sticky Footer #1

In this example below you will see how to do a Sticky Footer #1 with some HTML / CSS and Javascript

A simple example to make a footer always on bottom

Thumbnail
This awesome code was written by oieduardorabelo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oieduardorabelo ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sticky Footer #1</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class='wrapper'>
  <div class='header'>
    <h1>Header</h1>
  </div>
  <div class='content'>
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, ipsam maiores nam quaerat quam natus fuga. Ab, blanditiis pariatur optio dicta hic expedita distinctio esse libero enim suscipit aut itaque modi inventore architecto amet. Tempora, pariatur, fugit, voluptate natus deleniti dolorum eaque accusantium reprehenderit aut laudantium magnam cupiditate inventore ipsum earum amet nostrum esse consectetur accusamus asperiores doloribus excepturi ea quidem quae. Debitis, voluptas, nam, facere, nesciunt animi excepturi et eius consequuntur iusto suscipit consequatur accusamus labore atque placeat repellendus tenetur soluta. Deleniti, in ipsa consectetur mollitia quas sed delectus libero quod illo repellat molestiae obcaecati rerum! Iure, magnam, repellat!</p>
  </div>
  <div class='footer'>
    <h1>Footer</h1>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/oieduardorabelo/sticky-footer-1-qdnfg */
*, *:after, *:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: "Helvetica Neue", sans-serif;
}

.wrapper {
  background-color: #efefef;
  min-height: 100%;
  position: relative;
}

.header, .content, .footer {
  padding: 10px;
}

.header {
  background-color: rgba(52, 152, 219, 0.4);
}

.content {
  padding-bottom: 100px;
}

.footer {
  background-color: #cecece;
  bottom: 0;
  height: 90px;
  left: 0;
  position: absolute;
  width: 100%;
}

Comments