Menu icon Foundation

My Posts

No Content

My Comments

Douglas Olena commented on Charles Smith's post about 4 years

The Ryan Fait sticky footer provides the best solution for me, though the css required is thinner because Foundation css resets the browser to the required values. The css:

/* Sticky Footer: compliments to http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ */

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}

footer, .push {
  height: 4em;
}

Adjust the em in .wrapper margin and footer height to keep your footer correctly visible.

The wrapper class sits around the site content. Using the standard footer tag, instead of a footer class works fine.

The .push class sits in an empty div just before the end of the of the .wrapper div and the footer tag and content follows the .wrapper. The html:

<body>
  <div class="wrapper">
    <!-- body content -->
    <div class="push"></div>
  </div>
  <footer>
    <!-- footer content -->
  </footer>
  <script . . .></script>
</body>

Posts Followed

  • 11
    Replies
  • Sticky Footer

    By Charles Smith

    I have been looking around and around for an answer to this; I've found many forums where others are asking, but no real straight forward solution. Is there a class or JS that will create the sticky footer like on the Foundation website that works seamle... (continued)

    Last Reply by Douglas Olena about 4 years ago


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Charles Smith's post about 4 years

The Ryan Fait sticky footer provides the best solution for me, though the css required is thinner because Foundation css resets the browser to the required values. The css:

/* Sticky Footer: compliments to http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ */

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}

footer, .push {
  height: 4em;
}

Adjust the em in .wrapper margin and footer height to keep your footer correctly visible.

The wrapper class sits around the site content. Using the standard footer tag, instead of a footer class works fine.

The .push class sits in an empty div just before the end of the of the .wrapper div and the footer tag and content follows the .wrapper. The html:

<body>
  <div class="wrapper">
    <!-- body content -->
    <div class="push"></div>
  </div>
  <footer>
    <!-- footer content -->
  </footer>
  <script . . .></script>
</body>

Posts Followed


Following

  • No Content

Followers

  • No Content