Genel olarak CSS Yapışkan Altbilgisi, mükemmel bir şekilde sorunsuz çalıştığı ve JavaScript gerektirmediği için en iyi yoldur. Gerekli işaretleme mümkün değilse, bu jQuery JavaScript bir seçenek olabilir.
HTML
#Footer'ın sayfanızda görünen son şey olduğundan emin olun.
Sticky Footer
CSS
Ona belirli bir yükseklik vermek en aptalca bir kanıttır.
#footer ( height: 100px; )
jQuery
Pencere yüklendiğinde ve kaydırıldığında veya yeniden boyutlandırıldığında, sayfa içeriğinin pencere yüksekliğinden daha kısa olup olmadığı test edilir. Öyleyse, bu, pencerenin sonundan önce içeriğin altında beyaz boşluk olduğu anlamına gelir, bu nedenle altbilgi pencerenin altına yeniden konumlandırılmalıdır. Değilse, altbilgi normal statik konumunu koruyabilir.
// 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) ));
Demo
Demoyu Görüntüle