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
 

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
26
Roma
alessandro1997.netsons.org
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
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.046
150
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.046
150
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
R Distribuire uno Script "Facebook Auto Post" PHP 0
S Come distribuire una applicazione PHP in Cloud Cloud Computing e Cloud Server 0
S voi consigliate un framework per distribuire? PHP 0
M form da distribuire su più pagine PHP 1
G Elementi HTML HTML e CSS 1
G Elementi Menù orizzontali HTML e CSS 2
A media degli elementi estratti da una query MySQL 0
P Errore nell'indirizzo degli elementi HTML e CSS 2
F Creare elementi html con javascript Javascript 3
R Includere elementi array fra apici PHP 1
A Contare gli elementi di un array PHP 13
T Contatore alla rovescia su più elementi simultaneamente Javascript 4
S [PHP] Estrarre elementi array su più variabili PHP 5
L [Java] Aggiungere elementi ad array JSON Java 0
R Visualizzazione elementi Access MS Access 2
D Elementi duplicati su blog SEO e Posizionamento 1
S elementi statistici - Matrice e Gestione Array PHP o Javascript Javascript 0
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
Raziel84 [Java] Combinazione elementi matrice Java 0
N Dialog performance con tanti elementi jQuery 2
alessandra86 [PHP] Elementi di un array non visualizzabili PHP 7
D [PHP] Elementi tabella in orizzontale e NON Verticale PHP 12
asevenx modificare lista elementi togliendo l'elemento selezionato jQuery 1
S [HTML] Comportamento di due elementi block level flottanti HTML e CSS 2
blips Racchiudere una serie di elementi in un div jQuery 2
S [Javascript] [HTML] problema nella stampa degli elementi della pagina Javascript 3
F [Javascript] Problema funzione jquery con elementi css esterni Javascript 1
C [PHP] RISOLTO - Eliminare elementi duplicati da array multidimensionale PHP 1
F aggiungere codice dopo n elementi jquery jQuery 1
JeanWolf [Php] Elementi comuni di due array PHP 29
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
teoxs2508 [HTML] Posizionamento elementi su pagina web HTML e CSS 5
A come modificare gli elementi di una lista e gli editText? Sviluppo app per Android 0
JackIlPazzo Assegnare un id ad elementi con parser PHP 2
asevenx Selezionare elementi da un elenco in modo dinamico e inviarli al database PHP 0
N selezione elementi Javascript 0
asevenx Realizzare modulo per selezionare elementi da una lista PHP 1
C array_rand prende elementi casuali diversi? PHP 6
Marco_88 Verificare la selezione degli elementi dom jQuery 2
X Funzione onscroll relativa a elementi multipli Javascript 0
M elementi di una gridview appaiono in ordine casuale invece di quello deciso da me Sviluppo app per Android 2
N Dare id ad elementi classe jQuery 1
otto9due Accesso agli elementi <![CDATA[ ... ]]> di un file XML con SimpleXML e PHP PHP 2
V Scorrere elementi DOM e prendere dei valori Javascript 8
D SELECT Singoli elementi PHP 3
filomeni Elementi obsoleti SEO e Posizionamento 1
felino [Excel] Disposizione elementi per colonna Windows e Software 1
G Elementi a scomparsa Java 2
A passaggio dei singoli elementi elementi da json object a array Ajax 4
Devil-94 creare elementi sopra altri elementi. Javascript 1

Discussioni simili