Sticky Footer aint stickin.

[jontonsoup]

I just pulled down a fresh copy of bourbon/neat/bitters and installed it in my project. The styles seem to be all working fine. I have not changed any of the code yet.

I then turned on "superglue sticky" mode for footer-2 by uncommenting the SCSS and the HTML, but was unable to see the footer stick.

It seems there is no live example of a sticky footer in the example, so its possible something broke it and no one noticed?

Its also not working when I resize the page-- I have not put my code inside of any neat containers etc.

Here's my code: Layout:

body
  .wrapper-for-content-outside-of-footer
    include _navigation
    block content
  include _bottom_navigation

Bottom Nav is copy pasted from the refills page.

Let me know if anyone can reproduce this!

Thanks, Jon

[Magnus-G]

Hi @jontonsoup, when I try the following code (and add the real code where I have the "out-of-the-box code" commented out) it seems to work fine. Would you mind sending us your whole code snippet in case this doesn't solve your problem?

<div class="wrapper-for-content-outside-of-footer">
  content
</div>

<footer class="footer-2" role="contentinfo">
  <!-- footer-2 html code here -->
</footer>

@import "bourbon/bourbon";
@import "neat/neat";

$large-screen: em(860) !default;

.wrapper-for-content-outside-of-footer {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}

html, body {
 height: 100%;
}

.wrapper-for-content-outside-of-footer:after {
  content: "";
  display: block;
}

.footer-2, .wrapper-for-content-outside-of-footer:after {
  height: 17em;

  @include media($large-screen) {
    height: 4em;
  }
}

.footer-2 {
  // all the footer-2 styles here
}

[jontonsoup]

Hey, @Magnus-G .

Sure--

application.scss

@import "bourbon/bourbon";
@import "base/base";
@import "neat/neat";
@import "application/base";

application/base.scss

@import "utilities";
@import "cards";
@import "footer";

footer.scss

// Uncomment this for a sticky footer.
//
.wrapper-for-content-outside-of-footer {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}

html, body {
 height: 100%;
}

.wrapper-for-content-outside-of-footer:after {
  content: "";
  display: block;
}

.footer-2, .wrapper-for-content-outside-of-footer:after {
  height: 17em;

  @include media($large-screen) {
    height: 4em;
  }
}

.footer-2 {
  $base-spacing: 1.5em !default;
......

layout.html

body
  .wrapper-for-content-outside-of-footer
    include _navigation
    block content
  include _footer

footer.html

footer.footer-2(role="contentinfo")
  .footer-logo
    img(src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png", alt="Logo image")
  ul
    li
      a(href="javascript:void(0)") About
    li
      a(href="javascript:void(0)") Contact
    li
      a(href="javascript:void(0)") Products
  .footer-secondary-links
    ul
      li
        a(href="javascript:void(0)") Terms and Conditions
      li
        a(href="javascript:void(0)") Privacy Policy
    ul.footer-social
      li
        a(href="javascript:void(0)")
          img(src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/facebook-logo-circle.png", alt="Facebook")
      li
        a(href="javascript:void(0)")
          img(src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/twitter-logo-circle.png", alt="Twitter")
      li
        a(href="javascript:void(0)")
          img(src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/youtube-logo-circle.png", alt="YouTube")

Thanks! Jon

[jontonsoup]

I've reworked the code to match the behavior I expect -- not sure if its compatible in the same way as the previous code (CSS is my weakest spot).

.wrapper-for-content-outside-of-footer {
  overflow: scroll;
  height: calc( 100vh - 4em );
}

.footer {
  @include fill-parent;
  background: $footer-background;
  padding: $base-spacing;
  width: 100%;
  height: 4em;

[tysongach]

I’m closing this as we are focusing our efforts on a new, rewritten Refills library with a focus on accessibility and removal of grid and visual opinion for components. You can see a preview of the work here: http://refills.netlify.com/

Existing components and patterns from the 0.2.0 release will be provided as-is (no longer maintained) until the new version is released.