Problem mit Div-Höhe

[Bodoo]

Hi,

ich habe da mal ein Problem und ne Demo dazu gemacht:

Demo

Klickt bitte auf den Text und zieht bei gedrückter linker Maustaste nach links.

Das Div wird dabei schmaler und Scrollbars erscheinen. Soweit so gut. Aber leider bekomme ich es nicht hin, dass die Scrollbars perfekt in der Höhe sind. Irgendwie wird immer die Höhe der Titlebar dazugerechnet und unten dran gehängt anstatt das Div komplett zu füllen.

Was ich haben möchte ist ein Div, das man resizen kann, das man verschieben kann (das ist im Demo nicht drin) und dessen Inhalt sich an die Größe anpasst aber logischerweise nicht übers Div rausragt. Die Titlebar soll im verschiebbaren Div eine konstante Größe behalten und nicht mit Scrollen, also immer oben bleiben. Genau das ist aber mein Problem, denn genau dann klappt das mit den Scrollbars nicht mehr.

Bitte benutzt zunächst FF oder Opera zum testen, IE machts leider ganz falsch.

Es wäre nett, wenn mir da einer helfen kann. Quelltext vom Demo findet ihr schon Es nutzt keine externen Scripte.

Vielen Dank.

Bearbeitet 22. Januar 2011 von Bodoo

[_n4p_]

das problem wird durch das height: inherit; verursacht. damit erbt "mydiv" die höhe von mover. da "mover" anfangs keine definierte höhe hat, wird beides berechnet. setzt du jetzt die höhe per javascript, bekommt "mydiv" dieselbe höhe.

möglichkeiten:

1) wenn die höhe des divs gleich bleibt, kannst du die höhe von "mydiv" auf einen festen wert setzen. laut firebug 488px.

2) die höhe von "mydiv" auch per javascript ändern. laut firebug 60px weniger als die höhe von "mover"

[lilith2k3]

Mal abgesehen davon, das mir der Text beim Chrome aus dem Rahmen fällt ...

[Bodoo]

ok vielen dank, habe es nun geändert, musste aber echt die höhe per JS setzen. möglichkeit 1 hat nicht geklappt. habe allen divs eine starthöhe gegeben, dennoch wurde das mydiv falsch berechnet.

schade, dass man nicht per css sagen kann, höhe ist andere höhe minus x.

und so ganz verstehe ich es auch nicht, warum die höhe nicht automatisch passt, wenn alle anderen höhen bekannt sind.

im aktuellen fall ist die titlebar 50px hoch und mover initial 550px. wenn ich nun per js die höhe von mover ändere sollte ein browser doch wissen, mydiv muss die neue höhe minus konstanter 50px werden. dann noch sowas wie rahmen und scrollbars mitrechnen. wieso kann das kein browser?

in tabellen geht das doch auch.