div Kind-Element soll nicht ueber Eltern Element

[DaDrivel]

Hallo !

Bei der Erstellung einer Website bin ich auf folgendes Problem gestossen:

Ich habe ein Eltern-Div-Element (DE), indem sich zwei Kind-Div-Elemente (D1,D2) befinden. D1 befindet sich mit variabler Hoehe ueber D2.
Mein Problem ist jetzt, dass ich die Hoehe von D2 so einstellen moechte, dass dieses nicht ueber das Eltern-Element kommt, sich also genau zwischen D2 und dem Rand von DE befindet (siehe Zeichnung).
Dazu kommt, dass ich, falls der Inhalt von D2 zu gross wird, einen vertikalen Schiebebalken haben will, der sich nur ueber den Inhalt von D2 erstreckt ( also: 'overflow:auto' bei D2 und nicht bei DE )

Dieser Fall ist nicht erwuenscht:

So sollte es aussehen:

Habt inr eine Idee, wie sich dieses Problem elegant ( und dynamisch ) loesen laesst ?

Danke,
DaDrivel

 

[Efchen]

Wenn Du die Höhe von D1 nicht weißt, solltest Du nach D2, innerhalb von DE, ein "clear" einfügen (D1 und D2 müssen dafür natürlich floaten), damit D2 nicht über DE hinausgeht, und als nächstes kannst Du dann D2 eine feste Höhe geben und mit "overflow:auto" erreichen, dass bei zu großem Inhalt ein Scrollbalken kommt.

 

[DaDrivel]

Danke fuer deine Antwort erst einmal :)

Ich dachte ein 'clear' bewirkt das Ende eines Textumflusses. Wieso sollte es verhindern, dass D2 ueber den Rand von DE kommt ? Oder hat das 'clear' noch eine andere Wirkung als die Genannte ?

>>und als nächstes kannst Du dann D2 eine feste Höhe geben und mit "overflow:auto" erreichen, dass bei zu großem Inhalt ein Scrollbalken kommt.

Ich moechte D2 keine feste Hoehe zuweisen, sondern es genauso gross machen, dass es zwischen D1 und dem Rand von DE passt ( also: hoehe(D2) = hoehe(DE) - hoehe(D1)[unbekannt] ). Oder hab ich da jetzt etwas falsch verstanden ?

Bzw, was nuetzt mir das 'floaten', wenn ich D1 und D2 direkt uebereinander haben moechte ?

Ich weiss, das sind viele Fragen, aber ich hoffe sie sind berechtigt :)

DaDrivel

P.S: Die Breite von D1 und D2 sind voellig egal

 

[Efchen]

Ich dachte ein 'clear' bewirkt das Ende eines Textumflusses. Wieso sollte es verhindern, dass D2 ueber den Rand von DE kommt ? Oder hat das 'clear' noch eine andere Wirkung als die Genannte ?

"float" nimmt ein Element aus dem Textfluss. Die Elemente, die danach kommen, werden aber im normalen Textfluss weiter positioniert. Inhalte fließen um das gefloatete Element rum, aber die Elemente interessieren sich nicht für die Größe des Element, das oben drüber schwebt. Also wird das floatende Element über den Rand des anderen Elements hinaus gehen, wenn es länger ist.
Mit "clear" wird der Normalzustand wiederhergestellt und der Textfluss geht hinter den floatenden Elementen weiter. Nur so kann ein Element ein floatendes Element umschließen.

Ich moechte D2 keine feste Hoehe zuweisen

Du brauchst aber eine feste Höhe, wenn Du Scrollbalken willst. Wenn Du keine feste Höhe angibst, dann wird sich das Element ja immer in seiner Größe verändern.

Bzw, was nuetzt mir das 'floaten', wenn ich D1 und D2 direkt uebereinander haben moechte ?

Heute weiß ich auch nicht mehr, warum ich das empfohlen habe :-)
Ich nehme an, das liegt daran, dass ich damals wie heute noch nicht verstehe, wo das Problem liegt, bzw. was Du genau willst.

<div id="DE">
  <div id="D1"></div>
  <div id="D2"></div>
</div>

Dein D2 kriegt dann eine fixe Breite und wird irgendwie positioniert, z.B. zentriert, so wie das im Bild aussieht.
Und jetzt?

Die Höhe von DE ist fest, die von D1 unbekannt und D2 soll den Rest einnehmen?
Hmmm...bin mir grad nicht sicher, ob das geht, oder ob das ein Fall für Faux Columns wird...