✔ Höhe Eltern-Div an Kind-Div anpassen

[matdacat]

So, jetzt hats mich auch erwischt: ich versuche ein tabellenloses Layout mit CSS zu entwerfen.

Drei Bereiche habe ich definiert:

<div id="main"> 	
  <div id="nav"></div>	
  <div id="content"></div>
</div>

nav wird in einer Spalte links neben content dargestellt. Da der Inhalt von content dynamisch generiert wird und main ein hübsches Hintergrundbild für die beiden Kindbereiche zaubert, suche ich nach einer Möglichkeit die Höhe von main der von content anzupassen. Ein height: auto; schafft das leider nicht.

Wie kann ich die Höhe des Elternbereichs der (maximalen) Höhe der Kinder anpassen?

Vielen Dank!

 

[soyo]

min-height sollten dir da helfen. Jedoch ist der Befehl nicht mit jedem Browser kompatibel, hier dafür ein kleiner Hack:

#main {
  height: auto !important;
  height: 300px;
  min-height: 300px;  
}

 

[matdacat]

Vielen Dank für die rasche Antwort, aber leider ändert sich nichts, wenn ich diese Zeilen einfüge. Eine Mindesthöhe zu definieren ist schon ok, aber eher gehts um die Anpassung, wenn die Höhe von content über dieser Mindesthöhe liegt. Die Kinder sind mittels position: absolute positioniert, hat das damit zu tun? Oder muss ich einen bestimmten overflow-Parameter setzen?

 

[soyo]

Hatte auch einen kleine Fehler in der Reihenfolge, versuch mal das:

#main {
  min-height: 300px;  
  height: auto !important;
  height: 300px;  
}

Wenn der Kontent größer wird als das Elternelement, vergrößert sich das Elternelement. Mindeshöhe halt ... oder soll es das etwa nicht tun?

 

[matdacat]

Nein, leider, auch dies ändert nichts. Ist die Reihenfolge wirklich von Bedeutung?

Ich poste hier noch die entsprechenden Einträge des Stylesheets:

 #main {
  	background-color: #FFFFFF;
        min-height: 300px;  
        height: auto !important;
        height: 300px; 
 	width: 815px;
	margin-left:auto;
  	margin-right:auto;
	position: relative;
	top: 30px;
  }
  #nav {
	width: 160px;
	heigth: 200px;
	position: absolute;
        top: 10px;
        left: 10px;
  }
  #content {
	width: 560px;
	border: 1px solid;
        position: absolute;
        top: 10px;
        left: 200px;
        overflow: hidden;
  }

Die Zeilen für das Hintergrundbild in main habe ich rausgenommen, lässt sich auch nur anhand des weißen Hintergrunds demonstrieren. Ist da ein grober Denkfehler drin? Wie schaffe ich es, dass sich die Größe von main an die von content anpasst?

 

[soyo]

Auf Anhieb fällt mir auf das main relative Positionierung hatt und content eine absolute. Wie soll sich da das Elternelemt anpassen.

Bei position:absolute hatt das Elemt keinen Einfluss auf die anderen Elemente. Es sei denn sie sind in der gleichen Ebene.

 

[matdacat]

Vielen Dank, Soyo, genau das wars! Puh, wird noch ne Weile dauern, bis ich diese Layout-Geschichten mit CSS wirklich beherrsche

 

[Souldelivery83]

Ich habe ein ähnliches Problem.

Es gibt ein Eltern-Element, welches relativ positioniert ist.
Dieses Element umschließt ein Kind-Element, welches absolut positioniert ist.


Sprich:

<div id="Eltern">


<div id="Kind">INHALT</div>

Sonstiger Inhalt des Elternelements


</div>

Nun ist es so, dass das Kind-Element eine variable Größe hat, oft auch höher als das Eltern-Element ist.
Das Eltern-Element soll grundsätzlich mindestens die gleiche Höhe haben, wie das Kind-Element.
Viel googlen und lesen hat mir bisher keine Lösung gebracht.
Das absolute DIV hat ja normal keinen Einfluss auf den Rest der Seite.
Es muss doch aber irgendeine Möglichkeit geben dennoch o.g. Problem zu lösen.

Über hilfreiche Tips würde ich mich sejr freuen.


Danke!

 

[soyo]

Wie ich auch schon damals geschrieben hab: entweder beide relativ oder beide absolut in einer Ebene. Vor allem, was bringt absolut positioniertes Element in einem relativ positionierten Element.

 

[Maik]

Hi.

Vor allem, was bringt absolut positioniertes Element in einem relativ positionierten Element.

Im folgenden Kontext bringt es sehr viel:

div#parent {
position:relative;
min-height:300px;
height:auto !important;
height:300px;
border:1px solid #000;
}

div#footer {
position:absolute;
bottom:0;
}

<div id="parent">
     <div id="footer">footer</div>
</div>

Ansonsten sei an dieser Stelle darauf hingewiesen, dass sich das Elternelement in der Höhe nicht anpasst, wenn die Kinderelemente, wie vom Autor dieses Themas gezeigt, darin absolut positioniert werden, unabhängig davon, ob das Elternelement nun relativ oder absolut positioniert ist.