How to make a footer that is stuck to the bottom when the content is short but not fixed in CSS?

This question already has an answer here:

How do you get the footer to stay at the bottom of a Web page? 21 answers

How to make a footer that is sticked to the bottom when content is shorter than screen height and float to bottom of the content when content is longer than screen height ?Now I am doing like this.

html

<body>
<div class='container'>

</div>
<footer>

</footer>
</body>

CSS

.container{
  position:relative;
  min-height:500px;
}

footer{
 height:200px;
 background-color:black;
 position:absolute;
 bottom:0px;
}

This code is fine when the content is shorter than the screen size or very short. But my issue is when the content is very much longer(eg.twice of the screen size), footer is sticked to the bottom when it first loads the page. But when I scroll down,the footer is stacked to the top of the new scrolled content. So please how can I achieve it ?

$(document).ready(function(){
    var containerHeight = $('.container').outerHeight(true);
    var windowHeight = $('window').height();
    if(containerHeight < windowHeight ){
       $('footer').css('position','fixed');
    }
});

Related Articles