Wie man einen Div in der Höhe wachsen lässt, während er im Inneren schwimmt

121

Wie kann ich ein Div dazu bringen, seine Höhe zu erhöhen, wenn es darin schwimmt? Ich weiß, dass das Definieren eines Werts für die Breite und das Setzen des Überlaufs auf versteckte Werke funktioniert. Das Problem ist, dass ich ein Div mit sichtbarem Überlauf brauche. Irgendwelche Ideen?

css html overflow css-float Pedrozath
quelle

Antworten:

278

overflow:auto;Auf dem enthaltenen Div wird alles darin sichtbar (sogar schwebende Gegenstände) und das äußere Div umhüllt sie vollständig. Siehe dieses Beispiel:

.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>
Erweitern Sie das Snippet

JakeParis
quelle
7
Ja, es funktioniert irgendwie, aber es besteht die Gefahr, dass Bildlaufleisten erzeugt werden. Richtig?
Pedrozath
1
Nein, nicht dass ich @pedro kenne. Das äußere Div sollte sich einfach weiter ausdehnen, um die inneren Divs einzuwickeln. Probieren Sie es in der Geige aus, vergrößern Sie die Dimensionen der inneren Divs und sehen Sie, was passiert.
JakeParis
2
Ich habe es versucht und eine winzige Bildlaufleiste mit einer Höhe von etwa 2 cm wurde rechts im Browserfenster angezeigt.
Nigel Alderton
1
@NigelAlderton Dies geschah für mich, weil ich die Höhe des Containers erzwang (wo der overflowhinzugefügt wurde). Es wurde overflow: auto;height
behoben,
16

Es gibt mehr als einen Weg, um Schwimmer zu löschen. Sie können einige hier überprüfen:
http://work.arounds.org/issue/3/clearing-floats/

ZB clear:bothkönnte für Sie arbeiten

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

#element { zoom:1; }
Nikita Rybak
quelle
1
Der Vorteil dieses Ansatzes besteht darin, dass overflow: auto;Inhalte (wie Fokusdekorationen) abgeschnitten werden, die außerhalb des Elements überlaufen, dies jedoch nicht.
Dan
Überlauf: Es wurde automatisch eine horizontale Bildlaufleiste für mich erstellt, sodass ich sie nicht verwenden konnte. Das hat perfekt funktioniert.
Edwin Stoteler
Genau das, wonach ich gesucht habe. Dieses CSS wurde auf das übergeordnete Element angewendet. Es erweitert die Höhe des übergeordneten <div>, sodass das schwebende Element darin verbleibt. Elegant, weil es klar besagt: "Der Boden des Elternteils muss den Schwimmer räumen."
IAM_AL_X
12

In vielen Fällen overflow: auto;wird dies ausreichen, aber um die Vervollständigung und die browserübergreifende Unterstützung zu gewährleisten , sollten Sie sich Clearfix ansehen, das die Aufgabe für alle Browser übernimmt.

Betrachten wir das folgende Markup.

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

Zusammen mit den folgenden Stilen ..

.content { float:left; }

.clearfix { ..from link.. }

Ohne den Clearfix hätte der Elternteil divaufgrund seiner schwebenden Kinder keine Größe. Durch den Clearfix wird der Elternteil die schwebenden Kinder berücksichtigen.

Miphe
quelle
2
Clearfix ist ein zusätzliches Markup. Geben Sie einfach dem Elternteil Div das Markupoverflow: auto;
JakeParis
7

Ich dachte mir, dass eine großartige Möglichkeit, dies zu tun, darin besteht, display: tabledie Div einzustellen.

Pedrozath
quelle