background in altezza (height: 100%)

[mikele86]

Penso che sia la domanda da un milione di euro!

Ho questo html:

<div id="header"></div>

<div id="sidebar-left" class="sidebar"></div>

<div id="center">
<div id="squeeze"></div>
</div>

<div id="footer"></div>

L'header e il footer sono a width: 100%

.sidebar {
float: left;
width: 200px
}
#sidebar-left {
background: #d6d5d0;
height: 100%;
}
#center{
width: 100%;
display: block;
padding: 0;
margin: 0;
}
.sidebar-left #squeeze {
margin-left: 210px;
}

Il risultato é header e footer a tutto schermo (il primo in cima alla pagina, il secondo in fondo)
in mezzi c'è sidebar-left a sinistra e squeeze a destra affianchati

Il problema è height: 100%; della sidebar-left, che non mi fa estendere il colore di sfondo su tutto lo schermo fino al footer, ma si ferma all'ultima riga inserita.

Io ho pagine ridimensionabili in altezza dinamicamente, e non posso modificare l'ordine dei tag nel codice html.

Come faccio a estendero lo sfondo per tutta la pagina?
Non so piu cosa provare!

[Mich_]

Quello che cerchi si chiama
false colonne (faux columns)
E` un argomento gia` trattato nel forum, per cui ti consiglio una ricerca (bottone in alto).

E comunque il tuo layout e` un classico 2 colonne con header e footer, per cui ne trovi diversi tra i layout pronti (alcuni link tra i "link utili").

[mikele86]

Ho letto tutto! Però c'è un problema di fondo.

Il metodo prende il div "Contenitore", gli associa un immagine a sinistra magari larga 20px e la trascina in altezza per tutto il testo che inserisco a destra.
Geniale!

Io però ho delle pagine a 2 colonne e a volte solo ad una colonna, questo lo stabilisco grazie ad una funzione in php, quindi se applicassi il metodo delle false colonne avrei sempre(anche in pagine dove non ho niente nella colonna di sinistra) un layout a 2 colonne!

Ecco perchè è una domanda da un milione di euro!

[Mich_]

Ma il PHP sa quando inserisce solo una colonna e quando due.
A quel punto ha due strade alternative:
1. inserisce un <link> diverso a seconda dei casi (cioe` vengon caricati due stili alternativi)
2. da` un id diverso a seconda dei casi (e nel CSS - unico in questo caso - farai in modo che ad ogni id corrisponda lo stile corretto).

[mikele86]

Praticamente ho un <div> globale che contiene l'area centrale, poi creo un <div> se c'è la colonna di sinistra. e per la zona di testo ho un altro <div> fisso.
Prtaticamente
<div>
<div>/*generato con un if se esiste la colonna*/</di>
<div>/*Sempre presente*/</div>
</div>

non essendo div inglobati non riesco a stabilire quando esiste uno o l'altro tramite css, dovrei inglobarli, in questo modo potrei adottare i metodo che mi hai descritto.
Il problema salta fuori se tra un pò volessi aggiungere una terza colonna a destra, o magri 2 affiancate, alla fine è un macello.

Ho deciso così di adottare le vecchie, ma sembre efficaci, tabelle, generando invece di <div> tag <td>.

[Mich_]

<div>
  <div id="colsx">/*generato con un if se esiste la colonna*/</di>
  <div id="$coldx if esiste colsx else $unico if non esiste colonna">/*Sempre presente*/</div>
</div>

Dove chiaramente l'if lo genererai con il PHP.
Quindi se esiste la colonna sinistra il div di destra si chiama #divdx; altrimenti (se non esiste la colonna) il div si chiama #unico.

Poi nel CSS definisci sia lo stile per #unico che lo stile per le due colonne.

[mikele86]

E' un ottima soluzione, mi piace! Grazie