nicht angemeldet
Hallo allerseits!
Ich hätte da ein Problem und wüsste gern, ob das, was ich mir da gedacht habe mit einfachem CSS zu bewerkstelligen ist.
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?
Mit JavaScript würde ich das schon irgendwie hinkriegen, frage mich nur, ob das auch ohne geht...
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:
.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;
}
Yep, bin mal gespannt, was ihr zu sagen habt, vielen Dank schonmal fürs Reinlesen!
chris