CSS: variable Hoehe eines DIVs

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

so richtig hab ich die Positioniererei mit CSS immer noch nicht verstanden. In einer Box bekannter, vorgegebener Hoehe soll oben ein Absatz stehen. Direkt unter diesem soll eine weitere Box folgen, deren unterer Rand auf den Rand der aeusseren Box fallen soll:

,---------------------------. \
| blablubber schwafel fasel | |
| laber palaber |
|,-------------------------.|
|| || 200px
|| ||
|| ||
|`-------------------------'| |
`---------------------------' \

Die Hoehe des Absatzes ist unbekannt: zum einen ist der Text darin variabel, zum anderen moechte ich dem Leser keine Schriftgroese vorschreiben. Ich gehe aber davon aus, dass er kuerzer als 200px ist. Meine Idee, ‚top:0; bottom:0; height:auto;‘ zu setzen, funktioniert (im Mozilla) leider nicht, die Hoehe der Box bleibt 0px. Tabellen moechte ich nicht verwenden. Mein Versuch liegt hier: http://www.der-frank.org/tmp/boxes.html
Hat irgendwer Ideen, wie ich die Hoehe automatisch bestimmen kann?

Danke im Voraus,
Gruss vom Frank.

#2

Hallo, Frank,

zumindest unter IE kann man die .clientHeight eines Objektes (Hier das obere DIV) abfragen. Position dann + x pixel tiefer legen, Höhe errechnen.

mfg

Dirk

#3

Hallo Frank,
hast du schonmal mit max-height, min-height und overflow versucht?
Gib doch einfach eine höhe von 200px ein, dann setzte overflow auf hidden, somit wird alles was über den rand ragt abgeschnitten (nicht angezeigt) du siehst also den rahmen der ersten Box.
also

height: 200px;
overflow: hidden;

ggf. kannst du mit min- oder max-height auch was erreichen, die beiden kenn ich aber nicht so genau. einfach mal testen.

Gruß

Marcel

#4

Hallo Frank,

Hi,

hast du schonmal mit max-height, min-height und overflow
versucht?

{min,max}-height scheint mir hier nicht zweckmaessig. overflow gilt ja immer fuer den Inhalt eines Elements. Ich kann also selbiges bei der aeusseren Box auf hidden setzen, dann wird deren Inhalt abgeschnitten.

height: 200px;
overflow: hidden;

Beispiel, wie sowas aussieht, unter dem selben URL, im alternativen stylesheet (second). Dabei verschwindet aber eben auch der untere Rand der inneren Box. Es sieht also irgendwie so aus (links):

,---------------------. ,---------------------.
| Abgeschnitten | | Nicht abgeschnitten |
|,-------------------.| |,-------------------.|
|| || || ||
|| || |`-------------------'|
`---------------------' `---------------------'

Gewuenscht ist rechts, erreicht ist links.

Fuer den Vorschlag unten, die Attribute direkt (ueber JavaScript) zu beeinflussen, bin ich auch dankbar, behalte ihn mir aber als letzte Reserve vor. Ich bin der Meinung, dass der browser das selber wissen muss, wie gross die innere Box sein muss.

Danke,
Gruss vom Frank.

#5

hast du schonmal mit max-height, min-height und overflow
versucht?

Die versteht der IE nicht (wie sollte es auch anders sein…)

Anscheinend gibt es wirklich keine Möglichkeit, einen variablen Spacer mittels CSS zu erzeugen. Theoretisch sollte es möglich sein, etwas ähnliches zu erreichen, indem man in ein div der gewünschten höhe den Inhalt selber als Float platziert (sp?). Das gibt allerdings Probleme mit Rahmen um den Spacer und den Inhalt (die liegen ineinander), außerdem weiss ich nicht, was man dann wo als inline-element definieren muss/darf/sollte.

+-div height=...-------------------+
|+-div spacer---------------------+|
||+-span float inhalt------------+||
|||Lorem Ipsum etc. |||
|||Bla Laber |||
||+------------------------------+||
|| ||
|| ||
|| ||
|| ||
|| ||
|+--------------------------------+|
+----------------------------------+