Team:William and Mary/Footer 2

<style> html {

 height: 100%;
 box-sizing: border-box;

}

• ,

  before,

  after {

 box-sizing: inherit;

}

body {

 position: relative;
 margin: 0;
 padding-bottom: 6rem;
 min-height: 100%;
 font-family: "Helvetica Neue", Arial, sans-serif;

}

.demo {

 margin: 0 auto;
 padding-top: 64px;
 max-width: 640px;
 width: 94%;

}

.demo h1 {

 margin-top: 0;

}

/**

* Footer Styles
*/

.footer {

 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
 padding: 1rem;
 background-color: #efefef;
 text-align: center;

} </style>

CSS “Always on the bottom” Footer

This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with position: absolute;.

This footer will always be positioned at the bottom of the page, but not fixed.