darkginger darkginger - 2 months ago 10x
CSS Question

Sticky footer will not stick underneath dynamic Rails content

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:

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

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

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.


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.

enter image description here