altezza div

[laboo]

Ciao a tutti:
ho un layout abbastanza basilare, a 2 colonne:

<div id="contenitore">

<div id="colonna-sinistra"> col. sinistra </div>
<div id="colonna-centrale"> col. centrale </div>

</div>

vorrei che la colonna sinistra fosse alta al 100%, con uno sfondo nero, allora imposto il suo css:


#colonna-sinistra {
float:left;
height:100%;
min-height:100%;
background-color:#000000;
}

non capisco perchè la colonna sinistra non scende fino alla fine, ma si blocca alla sua sola altezzaa...

qualche idea?

[Mich_]

height: 100%;
A che si riferisce la percentuale?
Il blocco #contenitore ha un'altezza definita o e` "libero di ridursi al minimo"?
Prova a dare un colore di sfondo al #contenitore (diverso dai colori dei due blocchi interni).

[laboo]

il "contenitore" si adatta all'altezza dei 2 layer che "floattano"

[Sgro]

Andiamo con ordine, anche perchè il discorso è complesso.

Innanzitutto, un contenitore non può adattarsi alla dimensione di un elemento figlio, se il figlio ha settato la proprietà float. In questo caso l'elemento figlio avrà l'altezza impostata, ma non "spingerà" il contenitore ad allargarsi, ottenendo un effetto di sovrapposizione.

Rimuovendo float dal figlio si ottiene l'effetto desiderato, ma solo se le dimensioni dei figli sono espresse con un'unità di misura statica (non percentuali).

L'utilizzo delle percentuali va letto come "mi imposto al x% della dimensione del mio contenitore, che però deve avere un'altezza espressa con un'unità di misura statica".

So che può creare confusione, però le cose stanno così. Se setti il div contenitore ad es. 500px e il div figlio a 100% avrai il risultato voluto. Se rimuovi l'altezza dal contenitore, vedrai tutto all'altezza minima. Questa tecnica funziona sia con float che senza float sul div figlio. Un esempio del css:

#container
    {
        background-color : red;
        height : 500px;
    }
    
    #colsx
    {
        height : 100%;
        float : left;
        width : 20%;
        background-color : yellow;
    }
    
    #coldx
    {
        
        width : 80%;
        background-color : blue;
    }

[fabiodm75]

Ciao a tutti,
una domanda... ma non c'è un modo per evitare di dare al contenitore un'altezza predefinita?
Se ho dei contenuti dinamici non posso sapere a prescindere che altezza inserire... :master:

[magis]

Originariamente inviato da fabiodm75
Ciao a tutti,
una domanda... ma non c'è un modo per evitare di dare al contenitore un'altezza predefinita?
Se ho dei contenuti dinamici non posso sapere a prescindere che altezza inserire... :master:

anche a me servirebbe avere risposta alla stessa domanda...

qualche anima pia che ci illumina?