Problema dell'altezza Flo Floated Div, nessuna soluzione semplice?

Question

Ho un problema con i CSS che non posso risolvere.

Ho effettuato a little diagram.

Diciamo che l'altezza della scatola rosa e quella verde sono determinate da quel contenuto. La scatola rosa potrebbe a volte essere la più piccola.

Quello che sto cercando di fare è che il riquadro più piccolo aggiusti la sua altezza rispetto al div contenente esterno, in modo che abbia la stessa altezza della scatola rosa (o viceversa).

Qualcuno ha qualche soluzione?

L'altezza minima delle caselle rosa e verde non funzionerà perché potrebbero superare tale altezza (anche senza supporto IE6).

L'altezza del 100% sulle caselle rosa e verde non funziona perché il div esterno non ha un'altezza fissa.

Un tavolo funzionerebbe, ma dai, un tavolo?

Potevo simulare sfondi e bordi sinistro-destro sulle caselle rosa e verde inserendole nello sfondo del div esterno. Ma sembra disordinato.

Al momento ho una soluzione js, ma ce ne deve essere una più semplice.

Cheers.

Answer 1

Utilizzare the Faux Columns technique per quello. Fondamentalmente, dovrai usare un'immagine di sfondo ripetuta sull'elemento genitore contenente entrambe le caselle.

Answer 2

A parte Javascript/Jquery o tabelle, l'unica cosa che mi viene in mente è una soluzione display: table-cell base (spiegazione here) - ma che non funziona in IE sia, e non c'è molta differenza di utilizzare un tavolo subito, c'è?

Direi che questo è uno dei rari casi in cui, a causa di caratteristiche CSS e/o implementazioni CSS, non c'è modo di aggirare un tavolo.

Modifica: Come altri rispondenti hanno sottolineato, ci sono soluzioni CSS ("colonne Faux") che funzioneranno nella maggior parte dei casi. Utilizzando "tabelle CSS" (usando le proprietà display: table) non ritengo ancora valide soluzioni, in quanto non sono supportate da IE6, un browser che ha ancora una quota di mercato considerevole.

Answer 3

Questo è lo stesso problema con le colonne dell'altezza, vedere questo blog post per una soluzione.

Answer 4

che dire di questo:

.green { 
    display:block; 
    float: left; 
    background: green; 
    width: 200px; 
    height: 200px; 
    position: relative; 
} 

.outer { 
    position: relative; 
    background: yellow; 
    overflow: auto; 
} 

.pink { 
    left: 250px; 
    background: red; 
    height: 100%; 
    width: 100px; 
    position: absolute; 
} 

dovrebbe funzionare .. forse ho cambiato i colori, la scatola rosa è il con crescente uno! ;)

modifica ah ok, ho perso il galleggiante sulla seconda casella. Se questo è un must-have allora, come già detto, le colonne finte sono una buona tecnica, penso.

Answer 5

Che ne dici di un compromesso?

Se le colonne faux non possono aiutarti, non vuoi usare le tabelle e hai già una soluzione javascript, semplicemente userò css (display: table, display: table-cell) e inserirò il javascript commenti condizionali per IE6 e IE7.

È quindi possibile rimuovere facilmente il javascript quando è il momento giusto e, nel frattempo, i browser moderni non dovranno eseguirlo.