How to keep footers at the bottom of the page?
HTML: <div id="container"> <div id="header"></div> <div id="body"></div> <div id="footer"></div> </div>
CSS:
html, body { margin:0; padding:0; height:100%; }
#container { min-height:100%; position:relative; }
#header { background:#ff0; padding:10px; }
#body { padding:10px; padding-bottom:60px; /* Height of the footer */ }
#footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; }
Resource:
https://pixel2pixeldesign.com/footers-bottom-page/