Il div contenitore CSS non ottiene l'altezza

116

Voglio che il mio div contenitore abbia l'altezza massima dell'altezza dei suoi figli. senza sapere quale altezza divavrà il bambino . Stavo provando su JSFiddle . Il contenitore divè in rosso. che non viene visualizzato. Perché?

css css-float liquid-layout

— Neel Basu
fonte

282

Aggiungi la seguente proprietà:

.c{
    ...
    overflow: hidden;
}

Ciò costringerà il contenitore a rispettare l'altezza di tutti gli elementi al suo interno, indipendentemente dagli elementi flottanti.
http://jsfiddle.net/gtdfY/3/

AGGIORNARE

Recentemente, stavo lavorando a un progetto che richiedeva questo trucco, ma doveva consentire la visualizzazione dell'overflow, quindi invece puoi usare uno pseudo-elemento per cancellare i tuoi float, ottenendo efficacemente lo stesso effetto consentendo l'overflow su tutti gli elementi.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

— Nightfirecat
fonte

8

Fondamentalmente, l'aggiunta di questa proprietà costringe il riquadro esterno a ignorare la regola dei contenitori mobili, in cui non vengono calcolati in altezza per i contenitori, e ad applicarli per il disegno a sfondo completo.

— Nightfirecat

4

Wow, ho pensato "Cosa? Non funzionerà". Ma sarò dannato. Pensavo totalmente che non si sarebbe comportato correttamente. Grazie

— fie

1

Non è davvero abbastanza hacky? Per me, sconfigge lo scopo dell'overflow. Non capisco perché questa sia la risposta corretta e più votata.

— Andrew Weir

3

@AndrewWeir Lo ammetto, fino ad ora, non ero del tutto sicuro del motivo per cui questo metodo di espansione dei contenitori per considerare correttamente i float nelle loro dimensioni funzionasse. Secondo a diverse fonti , sembra che questo provoca un elemento per cambiare la sua modalità di rendering, dal permettere di overflow visibile a non farlo, e così facendo, questo costringe gli elementi per non consentire che troppo pieno.

— Nightfirecat

2

Il primo modo, usando l'overflow, funziona per me. Il secondo modo funziona ANCHE e sembra meno rischioso nel caso in cui dovessi overflow in futuro. Vorrei solo poter votare due volte.

— Tyler Collier

28

Stai facendo galleggiare i bambini, il che significa che "galleggiano" davanti al contenitore. Per prendere l'altezza corretta, è necessario "liberare" il galleggiante

Il div style = "clear: both" cancella il floating e dà l'altezza corretta al contenitore. vedere http://css.maxdesign.com.au/floatutorial/clear.htm per maggiori informazioni sui float.

per esempio.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

— Yoeri
fonte

Questo è chiaro: entrambi; cosa sembra essere una soluzione adeguata per l'altezza del contenitore, perché il problema sono i bambini galleggianti. Quindi questo approccio sembra migliore piuttosto che l'overflow: nascosto; uno sopra.

— Ronnie Depp

Grazie @Yoeri per aver condiviso questa semplice soluzione. Sto cercando la stessa soluzione per il mio nuovo design dato che sono passati quasi 6 anni dall'ultima volta che ho progettato un layout web dopo essermi concentrato esclusivamente sulla prospettiva dello sviluppo PHP piuttosto che sul lato del design.

— Ronnie Depp

20

Non è così più facile?

.c {
    overflow: auto;
}

— Antonio Romero Oca
fonte

Sì, è: D. Grazie

— Alauddin Ahmed

4

Prova a inserire questo div di cancellazione prima dell'ultimo </div>

<div style="clear: both; line-height: 0;"> </div>

— sottovento
fonte

3

La soluzione migliore e più a prova di proiettile è aggiungere ::beforee ::afterpseudoelementi al contenitore. Quindi se hai ad esempio un elenco come:

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

E ogni elemento nell'elenco ha float:leftproprietà, quindi dovresti aggiungere al tuo css:

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

Oppure puoi provare la display:inline-block;proprietà, quindi non è necessario aggiungere alcun clearfix.

— Agata
fonte