.footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: red; color: white; text-align: center; }body{ margin:0; min-height:100vh; }<script> $(document).ready(function() { setInterval(function() { var docHeight = $(window).height(); var footerHeight = $('#footer').height(); var footerTop = $('#footer').position().top + footerHeight; var marginTop = (docHeight - footerTop + 10); if (footerTop < docHeight) $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer else $('#footer').css('margin-top', '0px'); // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop); }, 250); }); </script><div class="page"> <div class="page__inner"> <header class="header"> <div class="header__inner"> </div> </header> <nav class="nav"> <div class="nav__inner"> </div> </nav> <main class="wrapper"> <div class="wrapper__inner"> <div class="content"> <div class="content__inner"> </div> </div> <div class="sidebar"> <div class="sidebar__inner"> </div> </div> </div> </main> <footer class="footer"> <div class="footer__inner"> </div> </footer> </div> </div>