Come far crescere un div in altezza mentre galleggia all'interno

121

Come posso fare in modo che un div cresca della sua altezza quando ha dei galleggianti al suo interno? Lo so definire un valore per la larghezza e impostare l'overflow su lavori nascosti. Il problema è che ho bisogno di un div con l'overflow visibile. Qualche idea?

— pedrozath
fonte

278

overflow:auto;sul div contenitore rende visibile tutto al suo interno (anche gli oggetti flottati) e il div esterno li avvolge completamente. Guarda questo esempio:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}

<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>

Espandi lo snippet

— JakeParis
fonte

7

Sì, un po 'funziona, ma rischia di generare barre di scorrimento .. giusto?

— pedrozath

1

No, non che io sappia di @pedro. Il div esterno dovrebbe continuare ad espandersi per avvolgere i div interni. provalo sul violino, aumenta le dimensioni dei div interni e guarda cosa succede.

— JakeParis

2

Ho provato questo e una piccola barra di scorrimento alta circa 2em è apparsa sulla destra della finestra del browser.

— Nigel Alderton

1

@NigelAlderton questo stava accadendo per me perché stavo forzando l'altezza del contenitore (dove è overflowstato aggiunto). Risolto il problema rimuovendo overflow: auto;dalla classe e dal heightselettore

— eggy

16

C'è più di un modo per cancellare i float. Puoi verificarne alcuni qui:
http://work.arounds.org/issue/3/clearing-floats/

Ad esempio, clear:bothpotrebbe funzionare per te

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }

— Nikita Rybak
fonte

1

Il vantaggio di questo approccio è che overflow: auto;ritaglierà il contenuto (come le decorazioni del focus) che trabocca all'esterno dell'elemento, ma non lo farà.

— Dan

overflow: auto ha creato una barra di scorrimento orizzontale per me, quindi non potevo usarla. Ha funzionato perfettamente.

— Edwin Stoteler

Esattamente quello che stavo cercando. Applicato questo CSS al genitore. Espande l'altezza del genitore <div>, in modo che l'elemento floated rimanga al suo interno. Elegante, perché afferma chiaramente che: "la parte inferiore del genitore deve pulire il galleggiante".

— IAM_AL_X

12

In molti casi, overflow: auto;sarà sufficiente, ma per motivi di completamento e supporto cross browser, dai un'occhiata a Clearfix che farà il lavoro per tutti i browser.

Consideriamo il seguente markup ..

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

Insieme ai seguenti stili ..

.content { float:left; }

.clearfix { ..from link.. }

Senza il clearfix, il genitore divnon avrebbe un'altezza a causa dei suoi figli fluttuanti. Clearfix farà in modo che il genitore consideri i figli fluttuanti.

— miphe
fonte

2

Clearfix è un markup aggiuntivo. Dai semplicemente al div genitore il markupoverflow: auto;

— JakeParis

7

Ho pensato che un ottimo modo per farlo è impostare display: tableil div.

— pedrozath
fonte