Bottom Positioned Footer

In this example below you will see how to do a Bottom Positioned Footer with some HTML / CSS and Javascript

Common layout pattern. Footer is positioned at bottom of page even if page content is short. If page content grows longer however, footer scrolls along with content.

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

<head>
  <meta charset="UTF-8">
  <title>Bottom Positioned Footer</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.page-wrapper {
  min-height: 100%;
  padding-bottom: 3em;
  position: relative;
}

.page-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

.page-body, .page-footer {
  padding: 0.8em;
}

.page-footer {
  background: #315B7E;
  color: #fff;
}

h1 {
  margin: 0;
  padding-bottom: 0.15em;
  line-height: 1.1;
  border-bottom: 1px solid;
}
h1 small {
  display: block;
}

body {
  font-family: Georgia;
  font-size: 16px;
  background: #D8EEFE;
}

h1 + p {
  margin-top: .5em;
}

p:last-child {
  margin-bottom: 0;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="page-wrapper">
  <div class="page-body">
    <h1>
      Basic Layout Pattern: 
      <small>
        Bottom Positioned Footer (without flexbox)
      </small>
    </h1>
    <p><em>Footer is at bottom if content is short but scrolls with longer content.</em></p>
	  <p>Parent elements have 100% height. Immediate parent has min-height 100% instead and bottom padding to reserve space for footer.</p>
    <p><strong>NOTE:</strong> This is a classic non-flexbox layout pattern. Using flexbox is preferable in most cases if you have that option.</p>
  </div>
  
  <footer class="page-footer">
    My footer
  </footer>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/KristinB/bottom-positioned-footer-vukwj */
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.page-wrapper {
  min-height: 100%;
  padding-bottom: 3em;
  position: relative;
}

.page-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

.page-body, .page-footer {
  padding: 0.8em;
}

.page-footer {
  background: #315B7E;
  color: #fff;
}

h1 {
  margin: 0;
  padding-bottom: 0.15em;
  line-height: 1.1;
  border-bottom: 1px solid;
}
h1 small {
  display: block;
}

body {
  font-family: Georgia;
  font-size: 16px;
  background: #D8EEFE;
}

h1 + p {
  margin-top: .5em;
}

p:last-child {
  margin-bottom: 0;
}

Comments