Sticky footer will not stick underneath dynamic Rails content

Question

This is a common question, first off, so let's hit why I think this is unique. After reading numerous answers, I've seen a few different strategies to create a sticky footer -- all of which entailed setting the html, body in CSS to 100%, and then positioning the footer underneath.

This sticky footer should be positioned underneath the page content in my Rails app. As such, there will be instances of dynamic content (i.e. blog posts) that will run longer than the viewport.

My sticky footer works great on any page with static content (or that doesn't require scrolling) but will consistently place itself at the end of the initial view, which makes it look like it's in the middle of the page when scrolling. I can't Codepen because the posts are dynamic, but here's an example of this on Heroku.

In my CSS, I am controlling the page-wrap and the footer like so:

    * {
      margin: 0;
    }
    html, body {
      height: 100%;
    }
    .page-wrap {
      min-height: 100%;
      /* equal to footer height */
      margin-bottom: -160px; 
    }
    .page-wrap:after {
      content: "";
      display: block;
    }
    .site-footer, .page-wrap:after {
        margin-top: 10px;
        height: 160px; 
    }
    .site-footer {
      background: #002b52;
    }

Then in my application.html.erb, I am setting it up this way:

<body>
<%= render 'layouts/header' %>
<div class="page-wrap">
     <%= yield %>
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>
</body>

Now the good news is that the footer doesn't have to be dynamic - setting the height equal to the page wrap is totally fine. I just need to make sure it is placed after the dynamic content is added to the DOM.

Have a look at Flexbox. All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim. https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ — zitscher, Jul 27 '16 at 07:37
Hey @darkginger. Your explanation seems legit and your code as well. There should be no difference if you hardcode numerous of blocks there or the content is dynamic - sticky footer should do its job. Does Heroku page shows your example? — karlisup, Jul 27 '16 at 07:50
@karlisup, hey bad timing -- I took it down for a second to experiment. I am leaving the page up with the issue now so you can see: https://dry-stream-90763.herokuapp.com/stories?id=film-study-the-fritz-playbook. It's definitely happening still — darkginger, Jul 27 '16 at 07:55

score 3 · Accepted Answer · edited May 23 '17 at 12:09

3

The content in one of the container .special is floated. In this case the container do not understand how big are (what is the total height of all) elements in this container.

If you float elements they are not anymore in normal document flow. To fix this you have to add clearfix to the container.

Adding overflow: hidden to class .special should do.

edited May 23 '17 at 12:09

Community

1
1

answered Jul 27 '16 at 07:55

karlisup

672
12
22

Thank you! Just updated the CSS file with your exact code, and it still is appending it into the body of my text. I am thinking the issue must have to do with it being dynamically generated Rails content of my blog posts -- like, it's literally attaching it to the bottom of the viewport regardless of how many
s and
s are ultimately added to the DOM. That is the only difference between my site (which isn't working) and your example, using static blocks (that is working). Still testing.
– darkginger Jul 27 '16 at 08:03
I added image how it looks when you add clearfix to class '.special'. Is this the result you are looking for? – karlisup Jul 27 '16 at 08:10
1

Victory! Thanks a million. That was driving me crazy. – darkginger Jul 27 '16 at 08:17
Hah, no problem. Feeling happy that I could help you. Have a wonderful day ;) – karlisup Jul 27 '16 at 08:18

Sticky footer will not stick underneath dynamic Rails content

1 Answers1

s and