Erweitern eines übergeordneten <div> auf die Größe seiner untergeordneten Elemente

308

Ich habe eine ähnliche Seitenstruktur:

<body>
  <div id="parent">
    <div id="childRightCol">
      /*Content*/
    </div>
    <div id="childLeftCol">
      /*Content*/
    </div>
  </div>
</body>

Ich möchte mich für die Eltern divin zu erweitern , heightwenn die innere div‚s heighterhöht.

Bearbeiten:
Ein Problem besteht darin, dass mein aktuelles CSS eine horizontale Bildlaufleiste auf dem übergeordneten Element platziert , wenn der widthuntergeordnete Inhalt widthüber das Browserfenster hinaus erweitert wird div. Ich möchte, dass sich die Bildlaufleiste auf Seitenebene befindet. Derzeit ist mein Eltern-Div auf eingestelltoverflow: auto;

Können Sie mir bitte beim CSS helfen?

html  css 
— Steve Horn
quelle
6
Schwebst du die inneren Divs? Können Sie das aktuelle CSS veröffentlichen?
— Eric
2
@Eric - es war auch mein Problem - meine Kinder Div (s) hatten schweben: links, als ich es entfernte, wurde 'Eltern' automatisch erkannt und auf volle Höhe gedehnt!
— Michael Goltsman

Antworten:

539

Versuchen Sie dies für die Eltern, es hat bei mir funktioniert.

overflow:auto;

AKTUALISIEREN:

Eine weitere Lösung, die funktioniert hat:

Elternteil :

display: table;

Kind :

display: table-row;
— Dr. Casper Black
quelle
67
overflow:autobedeutet, dass der Browser entscheiden sollte, welcher Wert angewendet werden soll. Was wirklich funktioniert der Trick ist overflow: overlay.
— Alba Mendez
14
@jmendeth Ein Überlaufwert namens "Overlay" existiert nicht. Was funktioniert, wenn die untergeordneten Divs schweben, wird deklariert overflow:hidden.
— Christoph
16
Waaaait. Entspannen. Eine Sache ist die Behauptung overlay, dass sie außerhalb von Webkit nicht unterstützt wird. Eine andere völlig andere ist zu sagen, dass es überhaupt nicht existiert. Bitte zuerst RTFM . ;)
— Alba Mendez
6
Wenn es nur auf Webkit ist, dann existieren nur 20%: P Prost auf den Link, diese Website noch nie gesehen. Ist es gut gepflegt und aktualisiert? Schwörst du es?
— Pilau
20
Eine alternative Antwort ist stackoverflow.com/questions/450903/… und es wird vorgeschlagen, diese festzulegendisplay:inline-block . Was für mich großartig funktioniert hat.
— Jens
26

füge a hinzu clear:both. Angenommen, Ihre Spalten schweben. Abhängig davon, wie Ihre Größe angegeben ist, benötigen Sie möglicherweise einen Überlauf: auto;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>
— Bendewey
quelle
Dadurch erhalte ich eine horizontale Bildlaufleiste im übergeordneten Div, wenn der Inhalt breiter als das Browserfenster ist. Ich möchte, dass die horizontale Schriftrolle auf der gesamten Seite angezeigt wird.
— Steve Horn
1
Warum brauchen Sie den Überlauf: auto;? In meinem Test ist klar: beides; genügte.
— Paolo Bergantino
3
Dies setzt auch voraus, dass für das übergeordnete Element keine Höhe angegeben ist.
— Bendewey
Dieser Ansatz funktioniert in Firefox einwandfrei, in IE 6 jedoch nicht. Gibt es Problemumgehungen?
— Steve Horn
4

Für diejenigen, die dies in Anweisungen aus dieser Antwort dort nicht herausfinden können :

Versuchen Sie , Satz Polsterung Wert mehr dann 0 , wenn das Kind divs haben margin-top oder margin-bottom Sie es mit Polsterung ersetzen

Zum Beispiel, wenn Sie haben

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

Es ist besser, es durch Folgendes zu ersetzen:

#parent
{
    padding: 30px 0px 20px 0px;
}
— imy
quelle
4

Mit so etwas wie selbstlöschend divist perfekt für eine Situation wie diese . Dann verwenden Sie einfach eine Klasse für die Eltern ... wie:

<div id="parent" class="clearfix">
— Tim Knight
quelle
3

Hinzufügen 

clear:both;

Fügen Sie dem CSS des übergeordneten Div ein Div am unteren Rand des übergeordneten Div hinzu, das Folgendes löscht: beide;

Das ist die richtige Antwort, denn Überlauf: auto; funktioniert möglicherweise für einfache Weblayouts, wird jedoch mit Elementen durcheinander gebracht, die anfangen, Dinge wie negative Ränder usw. zu verwenden

— Internet Marketing Boise
quelle
2

Macht das was du willst?

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
— Eric
quelle
1

Ich habe ein übergeordnetes Div um den Inhalt eines untergeordneten Div erweitert, indem das untergeordnete Div als einzelne Spalte ohne Positionierungsattribut wie "Absolut" angegeben wurde.

Beispiel:

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}

Basierend darauf, dass maincolumn div das tiefste untergeordnete div von #wrap ist, definiert dies die Tiefe des #wrap div und die 200px-Polsterung auf beiden Seiten erzeugt zwei große leere Spalten, in die Sie absolut positionierte divs nach Belieben einfügen können. Sie können sogar die Polsterung oben und unten ändern, um Kopf- und Fußzeilendivs mit position: absolute zu platzieren.

— Ian
quelle
0

Sie müssen die Clearfix-Lösung auf den übergeordneten Container anwenden. Hier ist ein schöner Artikel, der den Fix- Link erklärt

— Nikhil
quelle
0

Wenn Ihr Inhalt in #childRightCol und #childRightCol nach links oder rechts verschoben wird, fügen Sie ihn einfach in css ein:

#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }
— user3436572
quelle
0

Dies funktioniert wie in der Spezifikation beschrieben - mehrere Antworten hier sind gültig und stimmen mit den folgenden überein:

Wenn untergeordnete Elemente auf Blockebene vorhanden sind, ist die Höhe der Abstand zwischen der oberen Randkante des untergeordneten Felds auf Blockebene, durch das keine Ränder ausgeblendet sind, und dem unteren Rand des untergeordneten Felds auf Blockebene das hat keine Ränder durchgebrochen. Wenn das Element jedoch einen oberen Abstand ungleich Null und / oder einen oberen Rand hat oder das Stammelement ist, beginnt der Inhalt am oberen Rand des obersten untergeordneten Elements. (Der erste Fall drückt die Tatsache aus, dass der obere und untere Rand des Elements mit denen der obersten und untersten untergeordneten Elemente zusammenfallen, während im zweiten Fall das Vorhandensein der Polsterung / des Randes verhindert, dass die oberen Ränder zusammenfallen.) Das Element hat einen unteren Abstand ungleich Null und / oder einen unteren Rand. Der Inhalt endet dann am unteren Rand des untersten untergeordneten Elements.

von hier: https://www.w3.org/TR/css3-box/#blockwidth

— Adam Tolley
quelle
0

Der folgende Code hat bei mir funktioniert.

CSS

.parent{
    overflow: auto;
}

html

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>
— anjaneyulubatta505
quelle
0

Wo wir anfangen

Hier sind einige HTML- und CSS-Elemente. In unserem Beispiel haben wir ein übergeordnetes Element mit zwei schwebenden untergeordneten Elementen.

/* The CSS you're starting with may look similar to this.
 * This doesn't solve our problem yet, but we'll get there shortly.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>
Erweitern Sie das Snippet

Lösung 1: Überlauf: Auto

Eine Lösung, die in allen modernen Browsern und in Internet Explorer zurück zu IE8 funktioniert, ist das Hinzufügen overflow: autozum übergeordneten Element. Dies funktioniert auch in IE7 mit hinzugefügten Bildlaufleisten.

/* Our Modified CSS.
 * This is one way we can solve our problem.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
  overflow: auto;
  /*This is what we added!*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
Erweitern Sie das Snippet

Lösung 2: Übergeordneter Container schweben

Eine andere Lösung, die in allen modernen Browsern und zurück zu IE7 funktioniert, besteht darin, den übergeordneten Container zu schweben.

Dies ist möglicherweise nicht immer praktisch, da das Schweben Ihres übergeordneten Div andere Teile Ihres Seitenlayouts beeinflussen kann.

/* Modified CSS #2.
 * Floating parent div.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  float: left;
  /*Added*/
  height: auto;
  width: 100%;
  /*Added*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
Erweitern Sie das Snippet

Methode 3: Hinzufügen von Clearing Div unter schwebenden Elementen

/* 
 * CSS to Solution #3.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clear {
  clear: both;
}
<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
  <div class="clear"></div>
</div>
Erweitern Sie das Snippet

Methode 4: Hinzufügen von Clearing Div zum übergeordneten Element Diese Lösung ist für ältere Browser und neuere Browser gleichermaßen kugelsicher.

/* 
 * CSS to Solution #4.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clearfix {
  clear: both;
}

.clearfix:after {
  clear: both;
  content: "";
  display: table;
}
<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>
Erweitern Sie das Snippet

von https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/

— jafar690
quelle
-1

Ich benutze dieses CSS für Eltern und es funktioniert:

min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;   
text-align:right;
overflow: hidden;
position: relative;
width: 100%;
— Pejman
quelle
2
Sie verwenden min-Höhe, zählt also nicht;)
— Pilau
-1 

#parent{
  background-color:green;
  height:auto;
  width:300px;
  overflow:hidden;
}

#childRightCol{
  color:gray;
  background-color:yellow;
  margin:10px;
  padding:10px;
}
<div id="parent">
    <div id="childRightCol">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat.
        </p>
    </div>
  </div>
Erweitern Sie das Snippet

Sie werden mithilfe der overflow:hidden;Eigenschaft in CSS verwaltet

— Chintan Kotadiya
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.