Layout con Height:100%

**pictor** · 12-10-2007, 09:44

Salve,

Sto cercando disperatamente di ottenere un layout liquido a tre colonne, con tutte le colonne alte al 100% della pagina.

Di solito uso questo layout:

codice:

<body>
  <div id="sinistra"></div>
  <div id="centro"></div>
  <div id="destra"></div>
</body>

codice:

#centro {
  margin: 0 200px;
  width: 100%;
}

#sinistra, #destra {
  width: 200px;
  position:absolute;
  top: 0px;
}

#sinistra {
  left: 0;
}

#destra {
  right: 0;
}

(solo per farvi capire il tipo di layout, magari manca qualcosa o è impreciso. Inoltre ci dovrebbero essere anche testata e footer)

Ora con questo ho due problemi.
1) Il footer si allunga solo in base al contenuto della colonna centrale. Se invece sono più lunghe le colonne laterali mi sballa il layout tagliandomi il footer.

2) Non riesco ad ottenere l'altezza al 100% per le due colonne laterali

Questo problema ce l'ho con un pò tutti i tipi di layout e mi premerebbe capire come funziona l'utilizzo del height:100% visto che sembra non avere quasi mai effetto.

Ho trovato questo articolo ma copiaincollando il codice suggerito non si ottiene quello che invece mostra nella spiegazione.

Mi date una mano?

**Sgro** · 12-10-2007, 10:55

Innanzitutto anche l'esempio che hai postato non funziona come tu vorresti: Se riduci la dimensione del browser, ti accorgerai che le colonne laterali prendono l'altezza della finestra, ma il corpo centrale è più lungo. Risultato: scrollbar verticale, ma quando scrolli verso il basso vedi che le colonne laterali non seguono quella centrale per tutta la sua lunghezza.

Quello che vuoi realizzare non si può fare con questo genere di tecniche. E' *TEORICAMENTE* realizzabile utilizzando la proprietà display e settandola appropriatamente su table-cell, table-row, ecc. per fare in modo che i div si comportino come una tabella.

Ho detto teoricamente però perchè queste proprietà non sono supportate dai browser attuali.

Quello che ti succede col footer è un'altra dimostrazione del fatto che non è realizzabile. Le due colonne laterali, essendo posizionate in maniera assoluta, sono staccate dal flusso della pagina, e quindi non possono "spingere" il footer sotto nel caso siano più lunghe del corpo centrale.

La soluzione a cui ti devi rassegnare è quella comunemente usata: header fisso, le tre colonne come hai fatto tu, e il footer largo come il corpo centrale, e sotto di esso, sempre posizionato in maniera fissa.

Ciao

**pictor** · 12-10-2007, 15:47

Sì stavo proprio adesso notando il problema dello scrolling

Per fisso che cosa intendi? Relativo?

Comunque forse qualche stratagemma riesco ad inventarlo per ovviare al dover tenere solo il footer centrale. Ma non è comunque un grossissimo problema (chiederò al cliente).

Piuttosto sto provando a risolvere come hai detto tu (spostando in pratica solo il footer nel centro, o devo cambiare anche qualcos'altro?).

Ma le colonne laterali continuano a non essere al 100%. O meglio lo sono fintamente perchè sono il 100% della finestra e non del contenitore!
Non capisco cone che diamine di logica abbiano scelto questo comportamento!!!

Quindi se la colonna centrale è più lunga delle laterali mi appare la scrollbar e quelle laterali (che sono al 100% della finestra) quando scrollo mi si spostano in su, lasciando uno spazio pari a quanto è più lunga la pagina rispetto alla finestra.

Come devo risolvere che non ho capito?

**pictor** · 15-10-2007, 14:56

Qua potete vedere quello che ho fatto fino ad adesso:

http://snipurl.com/1s6ko

Come faccio ad ottenere una colonna laterale destra che si allunghi quanto tutta la pagina (o comunque almeno fino al footer)?

Grazie

Discussione: Layout con Height:100%

Strumenti discussione

Ricerca discussione

Visualizza

Layout con Height:100%

Permessi di invio