Why doesn't sticky footer work? - html

Question

I have tried several things but my sticky header does not work. I've been trying several tutorials I found, but none worked. I have also looked at different post on stackoverflow but none described my problem.
Here's my HTML:
<div id='container'>
<div id='header>blabla</div>
<div id='actualpage'>bblablabal</div>
<div id='footer'>blablafooterblabla</div>
</div>
And here's the css:
html, body {
padding: 0;
margin: 0;
height: 100%;
}
#container{
background-color:white;
width:100%;
min-height: 100%;
height:100%;
}
#actualpage{
width:750px;
margin-left:auto;
margin-right:auto;
padding-bottom: 20px;
}
#footer{
margin-top:-20px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
bottom:0;
}
Thank you for your help!

Answer 1

You can add position: fixed or position:absolute (if you don't want the footer stick to bottom while scrolling) to your #footer:
#footer{
margin-top:-20px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
bottom:0;
position: fixed;
}

Answer 2

add position:absolute; to your #footer
and <div id='header> should be <div id='header'>

Answer 3

If you are referring to your footer, you may add position: absolute to your #footer
Fiddle
#footer {
margin-top:-20px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
bottom:0;
position: absolute;
}

Answer 4

#container{
background-color: yellow;
width:100%;
min-height: 100%;
}
#actualpage{
width:750px;
margin-left:auto;
margin-right:auto;
padding-bottom: 20px;
}
#footer{
margin-top:-32px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
}
<div id='container'>
<div id='header'>blabla</div>
<div id='actualpage'>bblablabal</div>
</div>
<div id='footer'>blablafooterblabla</div>
You need the footer outside of the container div.
Also, the bottom: 0; attribute was unnecessary and the negative margin for the footer needed to include the padding, which adds to the computed height
** also, add the closing "'" to id='header

Answer 5

tl;dr
See working CodePen: http://cdpn.io/KwzuA
or use Flexbox - see demo: http://codepen.io/astrotim/pen/PwYQOJ/right/?editors=010
Explanation
Using position for a sticky footer is typically not a good idea, as it removes the element from the document flow and can have undesired results of the footer overlapping the content when scrolling.
A tried and trusted method is to add a "push" div inside the wrapper div and then have the footer div below, outside the wrapper. Like this:
<div id="wrapper">
<header>
<h1>Header</h1>
</header>
<div id="body">
<p>Lorem ipsum...</p>
</div><!--#body-->
<div class="push"></div>
</div><!--#wrapper-->
<footer>
<p>Footer</p>
</footer>
For the CSS, you will need to set html, body and #wrapper with height: 100%. You then set a fixed height to your footer and apply the same height to #push. Then you offset the body with a negative margin-bottom. The #wrapper needs a few other properties, like so:
html, body {
height: 100%;
}
body {
overflow-y: scroll;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -160px;
}
.push, footer {
height: 160px;
}
footer {
/* remember the box model: padding+height */
padding-top: 15px;
height: 145px;
}
The footer will now flow properly when the content of the page extends below the fold, and will be sticky when the content does not.
** Use Flexbox **
The modern approach to this is using Flexbox. See: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
I used the Flexbox technique on a recent project