How to get sticky footer on every page

Question

Hi I have troubles to get the footer sticky.

The other pages are sticky because of the content. But on a empty page or page with few content not working.

The code:

html, body {
    height: 100%;
}
footer {
    position: absolute;
    bottom: 0;
}

If I use

position: absolute;
bottom: 0;

it works on this page but not on the other pages. Also tried with min-height

change absolute to fixed and add enough bottom padding to your content so that it can't finish behind the footer — Pete, Mar 30 '17 at 14:10
I can't access your site so no idea what your markup is in the scenarios where it doesn't work. You should include the markup and CSS that has the issue, preferably in a code snippet in addition to the link. Otherwise you might as well remove the link as ones your site changes or link is dead the question is no longer within context and less helpful to future users with similar issues. — Nope, Mar 30 '17 at 14:11
In that case you need to provide more code and explanation as from what you have given, it is not explained at all and looks as if you are just trying to have the footer at the bottom of the viewport - height 100% means that the body won't be larger than the viewport. Also there are many good examples of sticky footers out there that are easy to use so why not use one instead of re-inventing the wheel? — Pete, Mar 30 '17 at 14:14

score 1 · Accepted Answer · answered Mar 30 '17 at 14:21

1

Try this:

#page {
    min-height: 100vh;
    position: relative;
}

footer {
    bottom: 0;
    position: absolute;
}

answered Mar 30 '17 at 14:21

Rajesh Karunakaran

169
6

score 0 · Answer 2 · answered Jun 23 '17 at 09:59

I was struggling with this too but found my solution on this question: Make footer stick to bottom of page correctly

I believe the one that worked for me was the second one down: "The simplest solution is to use min-height on the html tag and position the footer with position:absolute;"

DEMO

HTML :

<article><!-- or <div class="container">, etc. -->
 <h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
 <h1>Footer Content</h1>    
</footer>
CSS :

html {
position: relative;
min-height: 100%;
}

body {
margin: 0 0 100px; /* bottom = footer height */
padding: 25px;
}

footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow:hidden;
}

I hope this helps!

How to get sticky footer on every page

2 Answers2