A Pen by Zoe Rooney.

Clean-Sticky-Footer-SCSS-Mixin.markdown

Clean Sticky Footer SCSS Mixin

A SCSS mixin for a clean sticky footer implementation using the nice simple technique in this Google Code project: https://code.google.com/p/cleanstickyfooter/

A Pen by Zoe Rooney on CodePen.

License.

index.html

<div id="wrapper">
  <div id="container">
    <p>Clean Sticky Footer SCSS Mixin</p>
  </div>
</div>
<div id="footer"></div>

style.scss

/**
 * the sticky footer mixin
 **/
@mixin sticky-footer($footer-height, $wrapper-selector: unquote("#wrapper"), $container-selector: unquote("#container"), $footer-selector: unquote("#footer")) {
  html, body {
    height: 100%;
  }
  body {
  	margin: 0px;
  	padding: 0px;
  }
  #{$wrapper-selector} {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -$footer-height;
    #{$container-selector} {
      padding: 0 0 $footer-height 0;
    } 
  }
  #{$footer-selector} {
    height: $footer-height; 
  }
}

/**
 * the sticky footer implementation
 **/
@include sticky-footer(30px);

/**
 * other styling just to make the demo more appealing
 **/
@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans:300);

html,body,#wrapper,#container,#footer {
  width:100%;
}
#wrapper {
  background: #F3F3F3;
}
p {
  margin: 0;
  padding: 5% 0 0;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 2.5em;
  color: #555;
  letter-spacing: 0.05em;
  text-align: center;
}
#footer {
  background: #F7A9B9;
}