Css e altezze

[garrincha]

Ciao amici,
ho una pagina xhtml a due colonne, più testa e piede.
Testa e piede hanno lo stesso colore, colonna sinistra e colonna destra hanno due colori diversi. Più precisamente, la colonna sinistra assume il colore di sfondo della pagina.
Se il contenuto della parte centrale causa lo scrolling della pagina tutto è ok, altrimeni, la parte centrale si chiude prima del body (che ha altezza 100%), e sotto la parte centrale si vede quindi il colore di sfondo della pagina. Non è bello.
Come vorrei risolverla: qui viene il bello... mi serve una definizione per la parte centrale in modo che si estenda fino al piede, anche se il contenuto non è sufficiente. Un min-height, quindi, ma che funzioni anche in explorer. Ma, in ogni caso, quanto devo settare di min-height? Ho un'altezza in percentuale (body), 2 in pixels (testa e piede): come faccio a ricavare la differenza? Non c'è qualche trucco per fregarlo?

Help me

Ciao

Gianluca

[span]

lo spiega in questo articolo: http://www.constile.org/tips/min-height/#CONTENUTI

ciao

[garrincha]

L'ho letto, ma in realtà è una gabola, perchè l'altezza che metto è una stima; non c'è una prioprietà autoadattante o qualcosa del genere?

[pacovox]

http://www.alistapart.com/articles/footers/
Questo articolo forse può esserti utile, sto utilizzando questa tecnica proprio in questi giorni e sembra funzionare bene.
In pratica dai il min-height al contenitore principale(100%), il footer lo "agganci" in basso e dai un padding-bottom pari all'altezza del footer ai contenuti in modo che non si sovrappongano al footer.
Questo è quello che sto utilizzando io:

/* BOX PRINCIPALE */
#principale {
position : absolute;
top : 0;
left : 50%;
margin-left : -375px;
width : 750px;
min-height : 100%;
height : auto !important;
height : 100%;
}

/* CONTENUTO CENTRALE */
#contenuto {
width : 550px;
padding-bottom: 50px;
margin : 0;
float : right;
}

/* CONTENUTO SINISTRA */
#sinistra {
width : 180px;
padding-bottom: 50px;
margin : 0;
float : left;
}

/* FOOTER */
#footer {
position : absolute;
bottom : 0;
left : 0;
width : 750px;
height : 50px;
clear : both;
}

[garrincha]

Grazie mille, ora lo stampo e ci do un'occhiata.

Ci risentiamo per l'esito!

Ciao

Gianluca

[garrincha]

Ho letto l'articolo, ma non era esattamente quello il mio problema. Infatti io ho il piede che sta sempre a fondo pagina, sia che la pagina scrolli, sia che la pagina stia tutta nella finestra del browser. Il problema è che ho due colonne di due colori diversi, che vorrei si adattassero anche loro alla finestra, se la pagina non scrolla, esattamente come fa il piede. Non ci riesco, anzi, per risolvere alla buona il problema, ho settato per entrambe le colonne height e min-height ad occhio, e Mozillone, dato che la misura è espressa in percentuale. Quindi ho risolto in maniera barbara per IE e Opera, mentre per Mozilla il problema resiste. Non solo, ma in ogni caso, avendo dovuto esprimere un'altezza, ho così costretto la pagina ad un'altezza minima, e quindi adesso scrolla anche quando potrebbe non scrollare. Una schifezza!

Help me

Ciao

Gianluca

[pacovox]

io ho il piede che sta sempre a fondo pagina, sia che la pagina scrolli, sia che la pagina stia tutta nella finestra del browser.

Questo lo risolvi con la tecnica che ti ho suggerito.

Il problema è che ho due colonne di due colori diversi, che vorrei si adattassero anche loro alla finestra, se la pagina non scrolla, esattamente come fa il piede

Per questo problema normalmente si procede dando un colore di sfondo al contenitore principale ed uno alla colonna centrale(con più contenuti), in questo modo la colonna laterale(con meno contenuti e quindi più corta) sembra estendersi per tutta l'altezza della pagina non avendo nessun colore di sfondo, che io sappia non si può fare altrimenti perchè non puoi adattare l'altezza di una colonna in base a quella più lunga come con le tabelle.

Nel tuo caso avendo il footer sempre agganciato in basso ed il contenitore principale sempre alto al 100% questa soluzione non va bene, io ho risolto dando al contenitore un'immagine di sfondo che in pratica fa sembrare le due colonne alte sempre al 100% anche se in realtà non lo sono, più o meno come in questo articolo: http://www.alistapart.com/articles/fauxcolumns/

[garrincha]

Hai centrato perfettamente il punto. Come venerdì, stampo e studio l'articolo, e poi ti rispondo. Intanto, grazie mille per la gentiliezza.

Saluti

Gianluca

[garrincha]

Grazie mille pacovox, era esattemente quello che volevo, ed ha funzionato alla grandissima! E mi servirà per tutta la vita! Di nuovo grazie

Saluti :mavieni:

Gianluca