distribuire elementi verticalmente tra header e footer

User Name · 6 Ott 2012

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

alessandro1997 · 6 Ott 2012

Non ti basta specificare margin-top e margin-bottom uguali per il contenuto? In questo modo hai la stessa distanza da header e footer. Se specifichi la distanza in percentuale, poi, non hai neanche il problema delle risoluzioni.

borgo italia · 7 Ott 2012

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 · 7 Ott 2012

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 · 7 Ott 2012

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 · 7 Ott 2012

tipo position relative
bottom ecc ecc?

Codice:

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

	

	}

borgo italia · 8 Ott 2012

ciao

User Name ha scritto:
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 · 8 Ott 2012

Ciao,

usa posizioni assolute non relative.

Valeria.

Cerca

Cerca

distribuire elementi verticalmente tra header e footer

User Name

Utente Attivo

alessandro1997

Utente Attivo

borgo italia

Super Moderatore

User Name

Utente Attivo

borgo italia

Super Moderatore

User Name

Utente Attivo

borgo italia

Super Moderatore

Vale2

Utente Attivo

Discussioni simili