oncode
11/18/2015 - 2:07 PM

Sticky footer markup.

Sticky footer markup.

$site-wrapper-max-width: 1200px;
$content-background-color: #fff;

// Site wrapper
// ============

.site-wrapper {
  & {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: $site-wrapper-max-width;
  }


  // Site wrapper
  // ------------

  > .main-wrapper {
    & {
      display: table;
      table-layout: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    > .main-content-wrapper {
      height: 100%;
      background-color: $content-background-color;
    }

    > .main-footer-wrapper {
      height: 1px;
    }

    > .main-header-wrapper,
    > .main-footer-wrapper,
    > .main-content-wrapper {
      display: table-row;
    }

    > .main-header-wrapper > .main-header,
    > .main-footer-wrapper > .main-footer,
    > .main-content-wrapper > .main-content {
      display: table-cell;
      vertical-align: top;
    }
  }
}
<body>
  <div class="site-wrapper">
    <div class="main-wrapper">
  
      <!-- Header -->
      <div class="main-header-wrapper">
        <header class="main-header">
          Header Content
        </header>
      </div>
      <!-- /Header -->

      <!-- Content -->
      <div class="main-content-wrapper">
        <main class="main-content">
          Main Content
        </main>
      </div>
      <!-- /Content -->

      <!-- Footer -->
      <div class="main-footer-wrapper">
        <footer class="main-footer">
          Footer Content
        </footer>
      </div>
      <!-- /Footer -->

    </div>
  </div>
</body>