Footer a fondo pagina

**fabiorino** · 19-11-2012, 20:13

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?

**JVM** · 19-11-2012, 20:53

ciao, hai provato ad utilizzare la il valore relative per la proprietà position invece che absolute ?

**fabiorino** · 19-11-2012, 21:16

Originariamente inviato da JVM
ciao, hai provato ad utilizzare la il valore relative per la proprietà position invece che absolute ?

Con relative il footer rimane sempre sopra il titolo.

**JVM** · 19-11-2012, 22:29

puoi postare una pagina di esempio con il codice ?

**fabiorino** · 19-11-2012, 22:51

Ecco il body (completo, ma con alcune parti inutili che avevo tralasciato nel CSS):

codice:

<body>

<div id="titolo"></div>

<div id="menu">




</div>

<div id="mappa"></div>

<div id="footer">

</div>

</body>

**JVM** · 19-11-2012, 23:10

se assegni float left al div #mappa, il footer ti verrà allineato con la mappa, già se inserisci #mappa all'interno di un altro div, il footer rimane a fondo pagina, mi pare che il tuo problema fosse questo.

codice:

<body>

<div id="titolo"></div>

<div id="menu">




</div>

<div> 
       <div id="mappa"></div>
</div> 

<div id="footer">

</div>

</body>

non so come ti vuoi organizzare la pagina ma già se inserisci #map in un div dovresti vedere il footer sul fondo della pagina invece che dove lo vedi ora. Rivediti bene la proprietà float.

**fabiorino** · 19-11-2012, 23:37

Ho provato a fare il div, ma non cambia niente. Togliendo float:left da #mappa
, il footer rimane sempre sopra il titolo

**JVM** · 19-11-2012, 23:48

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
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%;
}
</style>
</head>

<body>

<div id="titolo">mmmmm</div>

<div id="menu">




</div>

<div id="mappa">mmmm</div>

<div id="footer">
mmmmmm
</div>

</body></html>

copia e incolla, con vedi sempre il footer a metà pagina ?

**fabiorino** · 20-11-2012, 00:00

Ora lo vedo a fine pagina, ma se scrollo rimane fermo li e non va bene. Ho preso pari pari il tuo html e css. Posto il CSS completo scanso equivoci:

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;
}

#titoloclick {
	background-image:url(frame/title/images/mobile.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	width:100%;
	height:100%;
	float:left
}

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




#dove_siamo {	
	width:30%;
	height:100%;
	float:left;
	background-size: 100% 100%;
	background-repeat:no-repeat;
	margin:auto;
}


#chi_siamo {	
	width:30%;
	height:100%;
	float:left;
	background-repeat:no-repeat;
	background-size:100% 100%;
	margin:auto;
}


#pasti {	
	width:20%;
	height:100%;
	float:left;
	background-repeat:no-repeat;
	background-size:100% 100%;
	margin:auto;
}

#foto {	
	width:20%;
	height:100%;
	float:left;
	background-repeat:no-repeat;
	background-size:100% 100%;
	margin:auto;	
}

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

#mappaclick {
	background-image:url(frame/mappa/images/mobile.png);
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:100% 100%;
	float:left;
}

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

**JVM** · 20-11-2012, 00:24

dall' esempio che ti ho postato per copia incolla, se elimini la proprietà height dal div #mappa e la proprietà position da #footer dovresti risolvere.

Se vuoi "appendere" un footer alla fine della pagina, bottom:0px non è il sistema più giusto secondo me, gli elementi si posizionano da soli a fine pagina basta posizionarli alla fine del codice e non andare a impostare proprietà di tipo margin, non c'è bisogno di specificare la proprietà bottom.

Tra l' altro non so quanto sia utile utilizzare la percentuale per indicare l' altezza di un div, in genere utilizzo sempre i px, poi non so se utilizzi questo approccio per qualche motivo in particolare.

Facci sapere se così va .

Discussione: Footer a fondo pagina

Strumenti discussione

Ricerca discussione

Visualizza

Footer a fondo pagina

Permessi di invio