Lass die Höhe von Div mit seinem Inhalt wachsen

376

Ich habe diese verschachtelten Divs und ich brauche den Hauptcontainer zum Erweitern (in der Höhe), um die DIVs darin aufzunehmen

    <!-- head -->
    ...
    <!-- /head -->

    <body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
        </div>
        <div id="item_36" class="item_details">
        </div>        
        <div id="item_37" class="item_details">
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>
    <br class="clear"/>

    <div id="footer">
    </div>
  </body>
</html>

CSS ist dies:

* {
    padding: 0;
    margin: 0;
}

.main {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #4c5462;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
.main #container {
    height: auto;
    width: 46em;
    background: #4c5462;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left;       
}

.main #main_content {
    padding: 5px;
    margin: 0px;
}
#items_list {
    width: 400px;
    float: left;
}

.items_list {
    width: 400px;
    float: left;
}
.item_details {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 3px;
    float: left;
    border-bottom: 0.5px solid blue;
}

Das Problem, das ich habe, ist, dass #main_contentes sich nicht ausdehnt, um alle inneren Divs aufzunehmen, mit dem Ergebnis, dass sie immer wieder vor dem Hintergrund laufen.

Wie kann ich dieses Problem unter Berücksichtigung des obigen Szenarios lösen?

css height Patrick
quelle

5

Jungs, ich danke euch allen für die Antworten! Die beste Lösung für meinen speziellen Fall war es, einen BR hart zu codieren, um beide Seiten zu löschen (danke Jennyfofenny und auch Ricebowl). Wie auch immer, auch andere Lösungen haben funktioniert: Putting Overflow: Auto war in Ordnung und Floating #main_content war auch in Ordnung (obwohl ir reduzierte die Breite dieses Divs auf die Größe der untergeordneten Divs). Als Neuling frage ich mich: Haben diese Lösungen Nachteile oder kann ich sie gleichgültig verwenden? (zB vielleicht funktioniert einer von ihnen nicht mit IE6 oder ähnlichem ...)

Patrick

1

@Patrick, wenn Sie Ihre Frage weiterentwickeln möchten, klicken Sie auf den Link "Bearbeiten" (unter dem aktuellen Text der Frage) und fügen Sie die weiteren Fragen hinzu. Die Konvention schlägt vor, so etwas wie zu verwenden. <strong>Edited</strong>$Reason_for_revising_question...Möglicherweise müssen Sie den Fragentitel ändern, um die Änderungen widerzuspiegeln, wenn sich der Fokus wesentlich ändert oder ergänzt. =)

David sagt, Monica

4

Sie haben das divTag auch nie mit geschlossen id='container'. Das könnte einige Probleme verursachen.

Batkins

@patrick, du hast auch kein CSS für die .clearKlasse. Hast du es vergessen oder ist es in deinem Originalcode? Die .clearKlasse dazu brist sehr wichtig, wie @jennyfofenny in ihrer Antwort erwähnt.

Cannicide

280

Sie müssen a erzwingen, clear:bothbevor das #main_contentdiv geschlossen wird. Ich würde wahrscheinlich das <br class="clear" />;in die #main_contentdiv verschieben und das CSS so einstellen, dass:

.clear { clear: both; }

Update: Diese Frage hat immer noch einiges an Verkehr, daher wollte ich die Antwort mit einer modernen Alternative aktualisieren, indem ich einen neuen Layoutmodus in CSS3 namens Flexible Boxen oder Flexbox verwende :

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}

<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>

Erweitern Sie das Snippet

Die meisten modernen Browser unterstützen derzeit Flexbox- und Ansichtsfenstereinheiten. Wenn Sie jedoch die Unterstützung für ältere Browser beibehalten müssen, überprüfen Sie die Kompatibilität für die jeweilige Browserversion.

jennyfofenny
quelle

4

Hier ist der Artikel von w3schools über die Eigenschaft CSS clear. Im Grunde bedeutet klar, dass das Element, auf das das Löschen angewendet wird, unterhalb der Schwimmer in seinem Fluss beginnt (entweder nur links, nur rechts oder beides).

Jennyfofenny

230

Versuche dies: overflow: auto;

Es hat bei meinem Problem funktioniert.

sipőcz péter
quelle

10

+1, Diese Lösung ist elegant und fügt Ihrer Seite kein unsichtbares Tag hinzu. Siehe diese Geige: jsfiddle.net/XmKrm/1

Nabil Kadimi

5

Überlauf automatisch funktionierte gut für mich. Zu Ihrer Information wird eine Bildlaufleiste hinzugefügt, wenn die Höhe des automatischen Überlaufcontainers geringer ist als der darin enthaltene Inhalt. Größe auch oder Höhe einstellen: Auto zusammen mit dem Überlauf.

Bryan Myers

@ Roozbeh15 hinzufügen display: block;mit

BadAtPHP

2

Beste und einfachste Lösung ... Sie haben meinen Tag gerettet. Vielen Dank

Kashyap Kotak

Heilige Scheiße, das hat wunderbar funktioniert. Möchte jemand erklären, warum dies funktioniert hat?

Merkurial

86

Fügen Sie Folgendes hinzu:

overflow:hidden;
height:1%;

zu Ihrem Hauptdiv. Beseitigt die Notwendigkeit für das Extra <br />für das Klare.

Nick
quelle

Beeindruckend! das war genau das Gegenteil von dem, was ich erwartet hätte! Überlauf: versteckt = auf Inhalt erweitern! das hätte ich nie gedacht!

Mulllhausen

Ja, das hat auch bei mir funktioniert und es macht keinen Sinn warum. Gibt es eine Erklärung, warum die Funktion "Höhe 1%" und "Überlauf versteckt" funktionieren?

Acarlon

1

Wirklich, wie funktioniert es und warum funktioniert es, wenn keine Höhe eingestellt ist, warum der verborgene Überlauf nicht nur alles verbirgt (weil die Höhe 0 ist), sondern sich selbst erweitert, gibt es eine Erklärung oder glauben und einfach glücklich sein?

Max Yari

1

Überlauf: versteckt versteckt die Bildlaufleisten, behält aber die Größe des Blocks bei

Authentictech

funktionierte für mich nur mit 'overflow: hidden', aber 'overflow: auto' funktionierte auch und zeigte keine Bildlaufleisten an.

Whirlwind991

60

Alternativ können Sie dies auch versuchen, was in einigen Situationen nützlich sein kann

display:table;

jsFiddle

h0mayun
quelle

24

Ich würde nur verwenden

height: auto;

in deinem div. Ja, ich weiß, dass ich etwas spät dran bin, aber ich dachte, das könnte jemandem helfen, wie es mir geholfen hätte, wenn es hier gewesen wäre.

Charles
quelle

height: auto;bewirkt, dass alle Elemente unten nach oben verschoben werden. Mit dieser Eigenschaft in meinem Hauptinhaltsbereich wird die Fußzeile meiner Seite nach oben verschoben, sodass sie die Kopfzeile berührt und meinen Inhaltsbereich überlappt.

Aaron Franke

1

Das war die Lösung für mich. Vielen Dank!

Nik Hammer-Ellis

14

Folgendes sollte funktionieren:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

Steerpike
quelle

Überlauf hinzufügen: automatisch funktioniert, obwohl, wenn ich auch width: 100% hinzufüge, das div (#main_content) etwas größer ist als das übergeordnete div. Ich habe nicht verstanden warum!

Patrick

2

Das liegt daran, dass die Polsterung zusätzlich zu der angegebenen Breite zählt, sodass die Breite Ihres Elements 100% + 5 Pixel linke Polsterung + 5 Pixel rechte Polsterung

beträgt

1

Überlauf: auto; hat für mich gearbeitet, vielen Dank veddy.

Cosco Tech

9

Sehr einfacher Weg

Auf Eltern DIV:

height: 100%;

Diese Arbeit für mich jedes Mal

Daniel Beltrami
quelle

8

Verwenden Sie das span-Tag, an das display:inline-blockCSS angehängt ist. Sie können dann CSS verwenden und es auf viele Arten wie ein Div bearbeiten. Wenn Sie jedoch kein widthoder einschließen, wird heightes basierend auf seinem Inhalt erweitert und zurückgezogen.

Ich hoffe, das hilft.

dunkler Trester
quelle

Ihre Hoffnung hat funktioniert: Es hat mir zumindest geholfen! :) Übrigens habe ich mein Element als div(anstelle von a span) verlassen, aber display: inline-blockin meinem Fall immer noch gearbeitet (Chrom).

snapfractalpop

6

Normalerweise denke ich, dass dies gelöst werden kann, indem eine clear:bothRegel für das letzte untergeordnete Element von erzwungen wird #items_list.

Sie können entweder verwenden:

#items_list:last-child {clear: both;}

Wenn Sie eine dynamische Sprache verwenden, fügen Sie dem letzten Element, das in einer beliebigen Schleife generiert wurde, die die Liste selbst erstellt, eine zusätzliche Klasse hinzu, sodass Sie in Ihrem HTML-Code Folgendes erhalten:

<div id="list_item_20" class="last_list_item">

und css

.last_list_item {clear: both; }

David sagt, Monica wieder einsetzen
quelle

6

Dieses Problem tritt auf, wenn die untergeordneten Elemente eines übergeordneten Div schweben. Hier ist die neueste Lösung des Problems:

Schreiben Sie in Ihre CSS-Datei die folgende Klasse namens .clearfix zusammen mit dem Pseudo-Selektor : after

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

Fügen Sie dann in Ihrem HTML- Code die .clearfix- Klasse zu Ihrem übergeordneten Div hinzu. Zum Beispiel:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

Es sollte immer funktionieren. Sie können den Klassennamen als .group anstelle von .clearfix aufrufen , da dadurch der Code semantischer wird. Beachten Sie, dass es nicht erforderlich ist, den Punkt oder sogar ein Leerzeichen im Wert von Content zwischen dem doppelten Anführungszeichen "" einzufügen. Auch Überlauf: auto; Möglicherweise wird das Problem behoben, es verursacht jedoch andere Probleme wie das Anzeigen der Bildlaufleiste und wird nicht empfohlen.

Quelle: Blog von Lisa Catalano und Chris Coyier

Ifti Mahmud
quelle

5

#main_contentFügen Sie dem div eine float-Eigenschaft hinzu - es wird dann erweitert, um den float-Inhalt zu enthalten

Strahl
quelle

Danke Ray, das hat funktioniert, obwohl es das div auf die Größe seines Inhalts (#items_list) verkleinert hat, der die Breite hat: 400px; Ihre Lösung wäre wirklich gut, wenn ich #main_content auf seine volle Breite bringen könnte - irgendwelche Vorschläge?

Patrick

@ Ray 2 und ein bisschen Jahre später und dies ersparte mir potenzielle Kopfschmerzen mit einem ähnlichen Problem. Vielen Dank!

John H

4

Bevor Sie etwas tun, überprüfen Sie die CSS-Regeln mit:

{ position:absolute }

Entfernen Sie, falls vorhanden, und benötigen Sie sie nicht.

onalbi
quelle

2

Denn "absolut positionierte Elemente werden aus dem Fluss entfernt und daher von anderen Elementen ignoriert. Sie können also die Höhe der Eltern nicht entsprechend einem absolut positionierten Element einstellen." stackoverflow.com/questions/12070759/…

Federico

4

Floated-Elemente belegen nicht den Platz innerhalb des übergeordneten Elements. Wie der Name schon sagt, schweben sie! Wenn also einem Element, dessen untergeordnete Elemente schwebend sind, explizit keine Höhe zugewiesen wird, scheint das übergeordnete Element zu verkleinern und Dimensionen des untergeordneten Elements nicht zu akzeptieren, auch wenn die angegebenen untergeordneten Elemente overflow:hidden;möglicherweise nicht auf dem Bildschirm angezeigt werden. Es gibt mehrere Möglichkeiten, um mit diesem Problem umzugehen:

Legen Sie ein anderes Element unterhalb dem Floats mit clear:both;Eigentum oder Verwendung clear:both;auf :afterdem Floats.
Verwenden Sie display:inline-block;oder flex-boxanstelle von float.

Apoorv Srivastava
quelle

3

Sieht so aus

html {
 width:100%;
 height:auto;
 min-height:100%
}

Die Bildschirmgröße wird als Minimum verwendet, und wenn der Inhalt erweitert wird, wächst er.

SubstanceMX
quelle

2

In CSS: #clear_div{clear:both;}

Fügen Sie nach dem div-Tag des inneren div dieses neue folgende div hinzu

<div id="clear_div"></div>

http://www.w3schools.com/cssref/pr_class_clear.asp : Weitere Informationen

ingrid
quelle

2

Ich habe Bootstrap zu einem Projekt mit sectionTags hinzugefügt , die ich auf 100% der Bildschirmhöhe festgelegt hatte. Es hat gut funktioniert, bis ich das Projekt ansprechbar gemacht habe. Zu diesem Zeitpunkt habe ich mir einen Teil von Jennyfofennys Antwort geliehen sodass mein Abschnittshintergrund mit dem Hintergrund des Inhalts übereinstimmte, wenn sich die Bildschirmgröße auf kleineren Bildschirmen änderte.

Mein neues sectionCSS sieht so aus:

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

Angenommen, Sie haben einen Abschnitt mit einer bestimmten Farbe. Wenn Sie bei Verwendung min-heightdie Breite des Abschnitts aufgrund eines kleineren Bildschirms verringern, wird die Höhe des Abschnitts vergrößert, der Inhalt bleibt innerhalb des Abschnitts und Ihr Hintergrund bleibt in der gewünschten Farbe.

Adrian
quelle

2

Haben Sie den traditionellen Weg versucht? Geben Sie die Höhe des Hauptbehälters an: auto

#container{height:auto}

Ich habe das benutzt und es hat die meiste Zeit bei mir funktioniert.

Michelle Dimwaite
quelle

1

Ich bin selbst bei einem Projekt darauf gestoßen - ich hatte einen Tisch in einem Div, der aus dem Boden des Div herauslief. Keine der Höhenkorrekturen, die ich versucht habe, hat funktioniert, aber ich habe eine seltsame Korrektur dafür gefunden, und das heißt, einen Absatz mit nur einem Punkt am unteren Rand des Divs einzufügen. Gestalten Sie dann die "Farbe" des Textes so, dass sie dem Hintergrund des Containers entspricht. Arbeitete ordentlich wie Sie möchten und kein Javascript erforderlich. Ein nicht unterbrechender Raum funktioniert nicht - und ein transparentes Bild auch nicht.

Anscheinend musste nur gesehen werden, dass sich unter der Tabelle einige Inhalte befinden, um sie zu dehnen und zu enthalten. Ich frage mich, ob das für irgendjemanden anderen funktionieren wird.

Dies ist die Art von Dingen, die Designer dazu bringen, auf tabellenbasierte Layouts zurückzugreifen - die Zeit, die ich damit verbracht habe, dieses Zeug herauszufinden und es browserübergreifend kompatibel zu machen, macht mich verrückt.

Nancy Hastings-Trew
quelle

Muss eine Möglichkeit sein, dies mit CSS zu tun, aber ich habe keine Ahnung, was das sein würde. Das hat bei mir funktioniert, aber ich musste die Breite hinzufügen: 100%; Höhe: Auto; Mindesthöhe: 100%; Position: relativ;

RationalRabbit

1

Ich habe es versucht und es hat funktioniert

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>

Ahmed Aboelela
quelle

0

Wenn Sie die jQuery-Benutzeroberfläche verwenden, haben sie bereits eine Klasse. Die Werke sind nur ein Zauber. Fügen <div>Sie unten in dem Div, mit dem Sie erweitern möchten, ein height:auto;hinzu. Fügen Sie dann einen Klassennamen ui-helper-clearfix hinzu oder verwenden Sie dieses Stilattribut und fügen Sie es wie unten hinzu ::

<div style=" clear:both; overflow:hidden; height:1%; "></div>

Fügen Sie dem klaren Div die jQuery UI-Klasse hinzu, nicht das Div, das Sie erweitern möchten.

Lucas M. Oliveira
quelle

0

Ich weiß, dass dies eine Art alter Thread ist, dies kann jedoch mit der min-heightCSS-Eigenschaft auf saubere Weise erreicht werden. Deshalb lasse ich dies hier für zukünftige Referenzen:

Ich habe eine Geige basierend auf dem hier veröffentlichten OP-Code erstellt: http://jsfiddle.net/U5x4T/1/. Wenn Sie Divs entfernen und hinzufügen, werden Sie feststellen, wie sich der Container vergrößert oder verkleinert

Die einzigen 2 Dinge, die Sie zusätzlich zum OP-Code benötigen, sind:

* Überlauf im Hauptcontainer (erforderlich für die schwimmenden Divs)

* CSS-Eigenschaft mit Mindesthöhe, weitere Informationen finden Sie hier: http://www.w3schools.com/cssref/pr_dim_min-height.asp

Juan Carlos Alpizar Chinchilla
quelle

0

Anzeige hinzugefügt: Inline zum Div und es wurde automatisch (nicht das Scroll-Zeug), wenn der Höheninhalt größer wurde als die eingestellte Div-Höhe von 200px

Jelle
quelle

1

Dies ist keine klare Antwort auf die Frage. Für Anmerkungen verwenden Sie bitte die Kommentarfunktion.

ksbg

0

Sie können das CSS-Rasterlayout verwenden . Die Unterstützung ist im Moment ziemlich groß : Überprüfen Sie sie auf caniuse .

Hier ist das Beispiel auf jsfiddle. Auch Beispiel mit Tonnen von Textmaterial.

HTML Quelltext:

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

CSS-Code:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff

Sharikov Vladislav
quelle

0

Ich habe so ziemlich jeden der oben aufgeführten Vorschläge ausprobiert und keiner von ihnen hat funktioniert. "Display: table" hat mir jedoch geholfen.

PongGod
quelle

-1

Sie müssen nicht viel CSS verwenden, verwenden Sie einfach Bootstrap und verwenden Sie dann:

class="container"

für das div, das gefüllt werden muss.

Sie können Bootstrap von hier bekommen

Thadeo Arlo
quelle

Lass die Höhe von Div mit seinem Inhalt wachsen

Antworten:

Sehr einfacher Weg