Search code examples
htmlcssfootersticky

Why doesn't sticky footer work?

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!

Solution

  • 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;
}