Hallo Chris!
Yep, bin mal gespannt, was ihr zu sagen habt, vielen Dank schonmal fürs Reinlesen!
Also ..., dann will ich zumindest mal anfangen.
Sieht aber nach einer größeren "Baustelle" aus ... ;-)
Und zwar:
Innerhalb einer größeren Box habe ich drei kleine Textboxen mit einem sichtbaren Rahmen.
Zwei davon (in meinem Falle die obere und die untere) sollen in ihrer Höhe ganz normal durch ihren Inhalt bestimmt werden. Die dritte (in meinem Falle die mittlere) soll den restlichen vertikalen Platz einnehmen (mit etwas Abstand zur unteren Box) - unabhängig davon wie wenig Text sie in sich trägt. Also irgendetwas mit "min-height" nach meiner Erkenntnis.Mit anderen Worten: eine Box orientiert sich oben, eine unten (deshalb hier "position:absolute;") und eine mittlere sollte sich praktisch oben _und_ unten orientieren.
Um das hinzukriegen müsste die mittlere Box ja irgendwie die Höhe der unteren Box abfragen können - mal so ganz grundsätzlich gedacht.
Denke ich da falsch?
Falls nein: geht das überhaupt mit CSS?
Um es mal mit Radio Eriwan zu sagen: Theoretisch ja!
Praktisch sieht die Sache schon etwas anders aus, aber dazu komme ich später.
Du solltest dir erstmal das Kapitel Der normale Elementfluss angucken. Und das Wörtchen "Fluss" verdeutlicht hier schon, dass CSS quasi nur in eine Richtung (halt mit dem Strom/ Fluss), nämlich abwärts "funktioniert".
Sobald du also Elemente aus dem normalen Fluss heraus nimmst (bspw. durch absolute Positionierung), können sich diese nicht mehr (gegenseitig) beeinflussen, wodurch dein Vorhaben so nicht mehr zu realisieren ist (per CSS).
Mit JavaScript würde ich das schon irgendwie hinkriegen, frage mich nur, ob das auch ohne geht...
Es geht. Die Frage ist aber, ob es Sinn macht.
Hier ein Beispiel zum beschriebenen Problem:
<body>
<div id="inhalt01" class="inhalt" style="top: 100px;"><div id="links1" class="rahmen_links">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lectus arcu, et euismod purus. Vivamus lobortis nunc vitae quam aliquet tincidunt.
</div><div id="links2" class="rahmen_links" style="min-height:100px; top:20px;"> <!-- "min-height" provisorisch, dieser kasten sollte sich (mit etwas abstand) am unteren und oberen kasten ausrichten! -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div><div id="links3" class="rahmen_links" style="position:absolute; bottom:0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lectus arcu, et euismod purus. Vivamus lobortis nunc vitae quam aliquet tincidunt. Nunc consequat nulla ut mauris fermentum facilisis.
</div>
</div>
</body>
>
>
> Dazu die Style Sheets:
> ~~~css
> .rahmen_links {
> width: 300px;
> padding: 4px;
> position: relative;
> border: solid 1px;
> left: 0px;
> }
>
> .inhalt {
> position: relative;
> margin-left:auto;
> margin-right: auto;
> width: 900px;
> height: 500px;
> padding: 0px;
> border: solid 1px #0000FF;
> }
>
>
Ich habe deinen Code mal stehen lassen, weil er imho zeigt, dass da noch ein gewisser "Nachholbedarf" besteht.
Das fängt z.B. damit an, dass du inline-styles verwendest. Auch die Vergabe von IDs und Klassen, sowie deren Benennung scheint mir verbesserungsfähig. Außenabstände erreicht man üblicherweise durch Margins (und nicht relative Positionierung).
Ich fasse deine Ausgangssituation nochmal zusammen:
Du hast ein Container-Element (#inhalt01) welches eine vorgegebene Höhe und Breite hat (height: 500px; width: 900px;). In diesem Container-Element befinden sich nun 3 Kind-Elemente vertikal angeordnet, wobei sich die Höhe des oberen und des unteren Elements nach ihrem jeweiligen Inhalt richten soll, und das mittlere Element die verbleibende Höhe ausfüllen soll.
Soweit richtig?
Erste Frage, die sich aufdrängt ist: Was ist, wenn die Höhe der 3 "Boxen" höher ist, als die des umschließenden Containers?
Aber davon jetzt mal abgesehen ..., sind mir 2 Möglichkeiten bekannt, das mit CSS zu realisieren.
Möglichkeit 1:
Verwende die Display Table Eigenschaften
Möglichkeit 2:
Verwende das Flexbox Modul
Demo: http://flexiejs.com/playground/
Wenn, dann würde ich dir in diesem Fall zu Möglichkeit 1 raten.
So oder so hast du aber sicher erstmal eine Menge "Lese-/ Lernstoff" vor dir, um die jeweiligen CSS Eigenschaften und ihre Wirkungsweise zu verstehen. Letzteres ist elementar ...!
Bei (Verständnis)Fragen wird dir hier natürlich jederzeit gerne weitergeholfen.
Gruß Gunther