distribuire elementi verticalmente tra header e footer

User Name

Utente Attivo
17 Mar 2005
42
0
6
ciao a tutti
ho una pagina la cui struttura è abbastanza semplice ma mi sta facendo impazzire.

ho un div che fa da intestazione che sta sempre in cima con margine di pagina 0.

in basso vorrei un footer che sta sempre a fine pagina con margine zero.

tra questi 2 div c'è il contenuto della pagina che non si estende molto in verticale, (lo scroll della pagina è quasi nullo).

la richiesta è questa. come posso fare per distribuire il contenuto del div centrale in modo che quello che c'è dentro sia equamente ripartito?

perche essendoci poco contenuto che si sviluppa verticalmente, quello che mi è venuto fuori è

--------------
-header
()
contenuto
()
()
()
-footer
--------------

dove () sta ad indicare spazio vuoto, bianco

invece vorrei che il contenuto rimanesse a metà rispetto a header e footer.
--------------
-header
()
()
contenuto
()
()
-footer
--------------

essendo le risoluzioni dei visitatori diverse è un gran problema!
inoltre il footer tende a venire verso l'alto se il contenuto è poco.
il footer l'ho impostato così

codice:

Codice:
#bottom {

	
	position:relative;

	bottom:0px;

	width:auto;
	
	}
grazie
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.039
146
63
PR
www.borgo-italia.it
ciao
puoi provare una cosa del genere, in questo modo i div si centrano orizzontalmente e il contenuto si posiziona nel centro verticale tra header e footer.
poi lavorando sui valori di margin li avvicini o allontani come vuoi
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
html, body{
	margin:0px;
	padding:0px;
}
#header{
	background-color: #999999;
	width:80%;
	height:100px;
	margin: 2px auto 0px auto;
}
#contenuto{
	background-color:#006600;
	width:80%;
	height:200px;
	margin: 4% auto 4% auto;
}
#footer{
	background-color:#999999;
	width:80%;
	height:100px;
	margin: 0px auto 2px auto;
}
</style>
</head>
<body>
<div id="header">
  nel mezzo di camin di nostra vita
</div>
<div id="contenuto">
  mi ritrovai per una selva oscura<br>che le dititta via era smarrita
</div>
<div id="footer">pape satan pape satan aleppe gridò pluto con la voce chioccia</div>
</body>
</html>
 

User Name

Utente Attivo
17 Mar 2005
42
0
6
grazie!
adesso la parte centrale è centrata ma il footer non sta a fondo pagina se il div contenuto è vuoto o poco popolato.
il contenuto dovrebbe occipare tutta la schermata anche se vuoto e il footer stare incollato a fnie pagina sia quando la pagina ha scroll sia quando non ce l'ha.
è possibile?
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.039
146
63
PR
www.borgo-italia.it
ciao
...ma il footer non sta a fondo pagina se il div contenuto è vuoto o poco popolato.
prova a giocare con le altezze dei div
...e il footer stare incollato a fnie pagina sia quando la pagina ha scroll sia quando non ce l'ha
questo è in contradizione col fatto che il contenuto si centri tra header e footer, comunque se lo vuoi fisso devi giocare con la posizione
 

User Name

Utente Attivo
17 Mar 2005
42
0
6
tipo position relative
bottom ecc ecc?

Codice:
#bottom {
	position:relative;
	
        bottom:-100px;
	

	

	}
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.039
146
63
PR
www.borgo-italia.it
ciao
tipo position relative
bottom ecc ecc?
Codice:
#bottom {
	position:relative;
	
        bottom:-100px;

	}
si proprio così, devi fare delle prove variando i vari parametri sino a che non ottieni quello che vuoi.
poi io farei così:
darei delle altezze fisse ai vari div in modo da aggiustari sull'altezza del monitor e che la pagina completa non abbia lo scorrimento, lo scorrimento verticale poi lo dai al div contenuti
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

usa posizioni assolute non relative.

Valeria.