Взагалі CSS Sticky Footer - найкращий спосіб, оскільки він працює ідеально гладко і не вимагає JavaScript. Якщо потрібна розмітка просто неможлива, цей jQuery JavaScript може бути опцією.
HTML
Просто переконайтеся, що #footer - це остання видима річ на вашій сторінці.
Sticky Footer
CSS
Надання йому заданої висоти є найбезпечнішим.
#footer ( height: 100px; )
jQuery
Коли вікно завантажується та коли воно прокручується чи змінюється розмір, перевіряється, чи вміст сторінок коротший за висоту вікна. Якщо це так, це означає, що під вмістом до кінця вікна залишається пробіл, тому нижній колонтитул слід розмістити внизу вікна. Якщо ні, нижній колонтитул може зберегти нормальне статичне позиціонування.
// Window load event used just in case window height is dependant upon images $(window).bind("load", function() ( var footerHeight = 0, footerTop = 0, $footer = $("#footer"); positionFooter(); function positionFooter() ( footerHeight = $footer.height(); footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; if ( ($(document.body).height()+footerHeight) < $(window).height()) ( $footer.css(( position: "absolute" )).animate(( top: footerTop )) ) else ( $footer.css(( position: "static" )) ) ) $(window) .scroll(positionFooter) .resize(positionFooter) ));
Демо
Переглянути демонстрацію