Sticky Footer When Content Is Not Full Screen
This makes the footer stick to the bottom of the page if the content does not fill the screen. If content fills the screen, then the footer scrolls with the text.
html,body{height:100%;}
body{display:flex; flex-direction:column;}
#content{flex: 1 0 auto;}
#footer{flex-shrink:0;}
Set the html and body tags to 100% height. Then, on the body tag alone, apply the css: display:flex; flex-direction:column; Create a div with id="content", and a footer div with id="footer".
This page uses this css code. Notice the footer is stuck to the bottom of the page. If you resize the browser window so this text pushes far enough down you will see the footer scroll with the rest of the text.