Sticky footer, footer fisso in fondo alla pagina

Posiziona re il footer infondo alla pagina , indipendentemente   dalla lunghezza dei contenuti  è un gioco da ragazzi, basta applicare le nostre conoscenze di css con criterio è tutto sarà risolto.

Come fare

Applichiamo a tag html,body l’altezza di 100%:

html,body{ height:100%;}

Dopodiché costruiamo un contenitore principale ,con le seguanti caratteristiche:

#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -70px;
}

Il margine basso (margin-bottom) negativo, applicato al contenitore sottrae alla lunghezza della finestra, l’altezza del nostro footer. Quindi nel mio caso il footer sarà alto 70px:

#foot{
	height:70px;
	background:#000;
	clear:both;

	}

Codice  css completo:

html,body{ height:100%; margin:0;}
#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -70px;
}
#foot{
    height:70px;
    background:#000;
    clear:both;
	}

DOWNLOAD DEMO

Segnalibro e Share

Costantino Fusco

Sviluppatore di siti internet e di applicazioni web. Programmazione Web: PHP/MySQL HTML/CSS Ajax Javascript wordpress, Strategie SEO