altezza div che occupi tutto lo spazio libero

[danny21]

Salve, ho un dubbio su come realizzare un pezzo del mio sito e spero che qualcuno possa darmi un'idea efficace.

Spiego il mio problema: ho creato una colonna di sinistra per il layout che occupa tutto lo spazio della risoluzione del tipo

<div style="width:200px;height:100%;position:absolute:top:0px;left:0px">

</div>

A questo punto ho inserito degli elementi all'intero di questo codice, tutti con dimensioni fisse come altezza e larghezza.

E fino a qui va tutto bene, però adesso io vorrei inserire un altro div all'interno della colonna, sotto agli elementi con dimensioni fisse che abbia per larghezza la larghezza della colonna (e su questo non ho nessun problema) ma come altezza lo spazio libero restante tra gli elementi fissi e la fine della pagina.

Essendo che la colonna ha come altezza il 100% non posso impostare al mio div un valore fisso di height, ma non posso nemmeno mettere un height:100% perchè altrimenti mi diventa dell'altezza della pagina.

Una soluzione che ho trovato è posizionarlo con un "position:absolute" in questa maniera

<div style="position:absolute;top:450px;bottom:5px;left:0px;right:0px">
</div>

Così, effettivamente, me lo posiziona usando lo spazio disponibile ma, aimè, non va nemmeno bene perchè gli elementi fissi sopra in alcune occasioni si ridimensionano e quando questo avviene, finiscono sotto al div posizionato con absolute.

Qualcuno ha qualche suggerimento?

[LaboratorioCSS]

Ciao Danny, quello che chiedi non credo si possa fare. Essendo ignota l'altezza dei precedenti contenitori non è possibile dare un valore all'altezza dell'ultimo elemento che compensi lo spazio restante.

La soluzione che avevi trovato dell'offset top andava bene ma solo nel caso gli elementi precedenti avessero avuto un altezza fissa, ma essendo variabile, gli vanno sopra. La soluzione potrebbe essere, calcolare tale valore con javascript. L'altezza dell'ultimo elemento è data dalla differenza tra il valore del riquadro elemento del contenitore e la somma di valori dei riquadri elemento degli altri.

Ovviamente dipende anche dal template che stai montanto. Spesso si possono travare soluzioni tecniche che nascondo dei piccoli trucchetti che simulare la vera intenzione, quindi dipende anche dall'aspetto finale che devi ottenere.

Fammi sapere se hai risolto in qualche altra maniera.