cssfootersticky-footer

How to make footer stick to bottom despite size of content?

I have this CSS code:

#main-wrapper {min-height: 300px;}

#main {}

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

I tried : clear:both; bottom:0; position:fixed; width:100%; for footer ..

but it works only in short content display .. when a content of a page is too long, then I have to scroll page down over footer ..

please help

Solution

  • see the example code here

    HTML

    <div id="main-wrapper">
    <div id="content"> content of any length</div>
    <div id="footer">Footer</div>
</div>

    CSS

    * {
    padding: 0;
    margin: 0;
}
#content {
    margin-bottom: 30px;/*same as footer height*/
}
#footer{
    position: fixed;
    bottom:0;
    height: 30px;
    background: #eee;
    width: 100%;
    text-align: center;
}