problema del footer in basso

**afrappe** · 02-11-2009, 15:47

So che questo è un problema abbastanza comune, ma non sono riuscito adistricarmi tra la moltitudine di suluzioni presenti in rete

ho il classico <div> contenitore, che contiene un <div> footer che deve sempre stare a fondo pagina indipendentemente dal contenuto della pagina, per pagine piene(dove il contenuto raggiunge come minimo la fine della schermata il problema non c'e', laddove la pagina è vuota il footer non rimane in basso ma sale)

nel div container ho una moltitudine di div(flottati o meno, non riesco nemmeno e non sarebbe utile elencarli tutti) e come ultimo div c'e' questo footer, mi aiutate ad applicare qualche regola css per farlo restare in basso indipendentemente da quello che c'e' sopra?

[code]
<div id="container">

<div>.......vari div e oggetti vari...
.........
...</div>

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

ps: ho provato a posizionare il footer in maniera assoluta e allinearlo in basso ma se lo metto in maniera assoluta non viene "spinto" verso il basso quando il contenuto della pagina aumenta

**afrappe** · 02-11-2009, 16:21

per ora ho fatto questo seguito questo articolo ma ancora non ho risolto
http://css.html.it/guide/lezione/64/...ma-del-footer/

impostato altezza html, body a 100%
impostato altezza container 100%
impostato footer a position:absolute bottom:0

rimane correttamente sul fondo ma quando il contenuto della pagina è piu lungo della pagina stessa il footer rimane fermo(come giusto che sia) e il contenuto della pagina viene coperto. l'articolo suggerisce di impostare in padding-bottom pari all'altezza del footer dicendo che cosi il footer dovrebbe essere spinto in basso ma a me rimane inchiodato nella sua posizione originale.
ho dimenticato qualcosa?

**Mich_** · 02-11-2009, 16:43

Se imposti l'altezza di html e body al 100%, poi se il contenuto sfora, non lo vedi piu`.

Invece nel tuo problema devi definire:
min-height: 100%;
e lasciare height: auto (il default), in modo che possa espandersi.

Nota comunque che il problema del footer in basso e` stato affrontato molte volte, per cui potresti trovare varie risposte nel forum (prova a fare una ricerca - bottone in alto).
Inoltre e` affrontato anche in alcuni dei layout in rete (vedi ad esempio i "link utili" - sezione layout)

**afrappe** · 02-11-2009, 17:05

ho sostituito height:100% con min-height: 100% nel html, body
e ho messo height:auto nel container

il footer come deve essere posizionato? in maniera assouta o relativa?
in entrambi i casi non mi funziona, spiego meglio:
- se posiziono il footer in maniera assoluta a bottom:0px sta sempre in basso ma quando il contenuto e piu lungo della pagina gli passa sotto e viene coperto.
-Se posiziono il footer in maniera relativa quando non c'e' contenuto il footer schizza verso l'alto.

**Mich_** · 02-11-2009, 17:22

Se il footer sta dentro il container, anche tale elemento deve avere min-height: 100%.

E se vuoi posizionare il footer in maniera assoluta, il suo contenitore deve essere posizionato almeno in maniera relativa (per spiegazioni piu` dettagliate vedi I posizionamenti assoluti e Capire i posizionamenti relativi).

**afrappe** · 03-11-2009, 11:38

FORSE CI SIAMO(rimane un un piccolo fix per firefox)

vi posto il codice di due pagine (una con poco contentuto ed una con il contentuto che supera la pagina in linghezza) su IE funziona correttamente in entrabe, su firefox anche quando il testo poco il footer va leggermente in basso dovendo quindi scrollare quando non necessario, spero che possiate dare un occhiata al codice

ps: PER Mich_ aggiungendo min-height al footer non mi rende piu visibile il contenuto

cmq ecco il codice:
pagina con poco contenuto

codice:

<html>
<head>
	<style>
		html, body
		{
			margin: 0px;
			padding:0px;
			height: 100%;
			min-height: 100%;
		}


		#container
		{
			background-color: azure;
			position:relative;
			height: 100%;
			padding-bottom:50px;    /*  padding lasciato per non andare sotto il footer    */
		}

		#main
		{
			background-color:yellow;
		}

		#footer
		{
			height:50px;
			position: absolute;
			bottom: 0px;
			width: 100%;
			border: solid 1px green;
			background-color:green;
		}


		body>div#container{height: auto; min-height: 100%}

	</style>
</head>
<body>
	<div id="container">
		<div id="main">
			pagina con poco contenuto

			pagina con poco contenuto

			pagina con poco contenuto

			pagina con poco contenuto

			pagina con poco contenuto

			pagina con poco contenuto

			fine contenuto###############
		</div>
		<div id="footer">testo del footer</div>
	</div>
</body>
</html>

pagina con molto contentuto

codice:

<html>
<head>
	<style>
		html, body
		{
			margin: 0px;
			padding:0px;
			height: 100%;
			min-height: 100%;
		}


		#container
		{
			background-color: azure;
			position:relative;
			height: 100%;
			padding-bottom:50px;    /*  padding lasciato per non andare sotto il footer    */
		}

		#main
		{
			background-color:yellow;
		}

		#footer
		{

			height:50px;
			position: absolute;
			bottom: 0px;
			width: 100%;
			border: solid 1px green;
			background-color:green;
		}


		body>div#container{height: auto; min-height: 100%}

	</style>
</head>
<body>

	<div id="container">

		<div id="main">
			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			pagina con molto contenuto

			fine contenuto###############
		</div>

		<div id="footer">testo del footer</div>
	</div>
</body>
</html>

Discussione: problema del footer in basso

Strumenti discussione

Ricerca discussione

Visualizza

problema del footer in basso

Permessi di invio