Sticky Footer doesn't work right - html

Question

I want to make a sticky footer like the one I made in this example.
http://codepen.io/Kenny94/pen/JvtFs
html, body {
height: 100%;
width:100%;
padding: 0;
margin: 0;
position: relative;
}
div {
font-size: 30px;
min-height:100%;
margin-bottom:60px;
background: red;
}
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: -1;
}
The problem is it doesn't work right in my current project. It sets the footer behind the body but if I start to scroll it appears. If I watch the size of the body in chrome it has a height off 970px but the whole site is much bigger because of the post. It seems to me that the body didn't expand like the Blog Post Wrapper. I set the BG-Color to grey in the body and that fills the whole page. I have no clue why it dosen't work with height 100%. I could set the height to 4000px to fit with the content and everything else but thats not a real solution.

Answer 1

I'm not exactly sure what you are trying to achieve.
-If you are wondering why the footer is placed behind the body, it's because you set
z-index to -1.
So the fix would be this: http://jsfiddle.net/bmpy6/
-If you don't want to have it visible when scrolling (so to say, keep it fixed at the bottom at all times), this should be what you want: http://jsfiddle.net/bmpy6/1/
For that, you omit the position: fixed;.

Answer 2

You don't need to set your height on the html tag or the body tag. It will flow with the content. You're setting the min-height of the main div to 100%. This will take up the rest of the remaining space when a view is loaded pushing the footer off the screen. You can either change the height of the main div or make the footer position fixed to the bottom of the screen if you want it to be sticky as in stick to the bottom of the screen.

Answer 3

Change :
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: -1;
}
To :
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: 1;
}
Just changing the z-index will bring your footer to the front. Remember that the Z-index basically gives your id's and classes precedence over one another in terms of their visibility.

Answer 4

You do not need to set the height at all. Try this:
div {
font-size: 30px;
margin-bottom:60px;
background: red;
}
Instead of:
div {
font-size: 30px;
min-height:100%;
margin-bottom:60px;
background: red;
}
You see, when you tell the page to have a height of 100%, you are telling it fill 100% of the screens height. When you remove the height,(In this case it was a min-height so it will expand if needed) the <div> expands to the height needed to hold the content.
See this JSFiddle for a working example
Hope this helps!