In generale, il CSS Sticky Footer è il modo migliore per procedere, poiché funziona perfettamente senza problemi e non richiede JavaScript. Se il markup richiesto semplicemente non è possibile, questo jQuery JavaScript potrebbe essere un'opzione.
HTML
Assicurati solo che il #footer sia l'ultima cosa visibile sulla tua pagina.
Sticky Footer CSS
Dare un'altezza prestabilita è il più infallibile.
#footer ( height: 100px; )jQuery
Quando la finestra viene caricata e quando viene fatta scorrere o ridimensionata, viene verificato se il contenuto delle pagine è più corto dell'altezza della finestra. Se lo è, significa che c'è uno spazio bianco sotto il contenuto prima della fine della finestra, quindi il piè di pagina dovrebbe essere riposizionato nella parte inferiore della finestra. In caso contrario, il piè di pagina può mantenere il suo normale posizionamento statico.
// 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
Visualizza demo