Pinned footer

by Denis Antonenko

HTML

<div id="wrap">
    <div id="main">
        <button id='addContent'>Add</button>
        
        
        
    </div>
</div>

<footer id="footer">
    
</footer>

CSS

html, body {
    height: 100%;
}

/*
$footer-height:$navbar-height;
*/

#wrap
{
    min-height: 100%;
    height: auto !important;
}

#main {
    overflow: auto;
    padding-bottom: 50px; /* $footer-height;*/
}

#footer {
    position: relative;
    margin-top: -50px; /* -$footer-height; */
    height: 50px; /* $footer-height; */
    clear: both;
    background-color: #e8e8e8;
}


#wrap{
    background-color: green;
}

#footer { 
    background-color: blue;
}

#main {
      background-color: red;
}

JavaScript

$(function(){
    $("#addContent").click(function(){
        $("#main").append($("<div>",{
            css:{
                border:'solid 1px black',
                margin: '10px'
            },
            text:"Some content"
            
        })); 
    });
})