i have a problem with keeping the footer stick to the bottom i havn't added styles to the footer i just made it the last element in the page and it works fine , until there is a page with small content , then the footer move up like in this picture

now what could i do to make the footer stick to bottom when page content has small height.

i tried to add theise styles to the footer :

footer{
position: fixed;
bottom: 0; }

this works fine if the page has small content but if it's not the footer gets displayed on top of the page content like this picture :

bottom line is how could i make this footer stick to bottom