Salve a tutti. Ho un problema abbastanza fastidioso: sto cercando di creare un piè di pagina che stia sempre a fondo pagina, adattandosi in base al contenuto, il problema è che quando scrollo la pagina rimane "piantato" nel punto in cui era.

Questo è il mio CSS (tralasciando le cose inutili):

codice:
body, html {
	margin:auto;
	background-image:url(img/title/pattern.jpg);
	background-color:#000;
	width:100%;
	height:100%;
}

#titolo {
	margin:auto;
	width:100%;
	height:20%;
	text-align:center;
	float:left;
}

#menu{
	width:100%;
	height:10%;
	margin:auto;
	text-align:center;
	float:left;
}

#mappa {
	position:relative;
	width:100%;
	margin:auto;
	text-align:center;
	float:left;
	height:100%;
}

#footer {
	position:absolute;
	bottom:0;
	width:100%;
    background-color:#69c;
	color:#000;
	text-align:center;
	height:3%;
}
Dove sbaglio?