Zweizeiliges DIV-Layout

[shockshell]

Hi,

vielleicht bin auch mittlerweile zu vernagelt um zu sehen wo die Lösung ist.
Also ich möchte gerne ein Seitenlayout mit zwei Divs machen, wobei diese als Top-"Frame" und Conten-"Frame" verwendet werden sollen. Der Content soll wie immer eine Höhe von 100% des Browser haben und bei Bedarf in der Höhe scrollbar sein.

Mein CSS sieht bisher so aus:

* html #topframe   {position:absolute;top:0px;left:0px;height:95px;width:100%;z-index:1}
* html #pagecontent {position:absolute;top:95px;left:0px;height:100%;width:100%;border-top-width:95px;}

Ich bekomme einfach keinen Scrollbalken zu sehen und wenn ich das hinbekomme, so ist der immer auf 100% des Inhalts ausgedehnt, so dass der überhaupt keinen Sinn macht, weil der untere Scrollbalken-Pfeil natürlich nicht zu sehen ist.
Ich glaube irgendwie fehlt mir die Höhenbeschränkung nach unten hin.
Der IE läuft übrigens im Q-Modus und ich möchte kein JS verwenden.

Danke für eure Infos.

Marcus.

 

[Gumbo]

Lies dir mal die Erklärung der Definition einer prozentualen Höhenangabe durch und studiere anschließend das Kapitel 9.3 zu den Positionierungsschemata. Dann sollte dir eigentlich auffallen, was du falsch machst.

 

[shockshell]

Hi Gumbo,

danke für die Seiten, aber ich habe leider nicht so viel Zeit mir das (jetzt) alles durchzulesen. Sehe ja ein, dass es richtig ist das zu tun, aber ich brauche leider jetzt eine Lösung...

Marcus.

 

[Gumbo]

Das Problem besteht darin, dass sich prozentuale Angaben von Ausmaßen des umschließenden Blocks der erzeugten Box berechnet wird, welche in deinem Fall beispielsweise das body-Element sein könnte. D. h. ein 100-prozentige Höhe eines Kindelements entspräche der vollen Höhe des body-Elements. Da die Kindelement nun jedoch durch die absolute Positionierung aus dem normalen Fluss entfernt werden und das eine 95 Pixel absolut von oben positioniert wird, behält es zwar die Höhe wird jedoch versetzt dargestellt, wodurch die Bildlaufleisten eingeblendet werden, da es aus dem sichtbaren Bereich rausragt.

Ich hoffe, ich konnte die Problematik verständlich erläutern.

 

[shockshell]

Ok, das habe ich soweit verstanden. Aber wie kann ich denn nun auf die Größe des Browsers bezug nehmen. Geht das nur, indem ich sozusagen einen Rand aus begrenzenden Div's erstelle und den Inhalt darin laufen lasse, so wie das im Tutorial beschrieben wurde?

 

[Gumbo]

Das Problem ist, dass das Element sowohl die volle Höhe des umschlossenen Elements (in deisem Fall des sichtbaren Bereichs) hat als auch um 95 Pixel versetzt ist.

 

[shockshell]

So,

habs soweit hinbekommen, dass es im FF und den Mozis/Opera fast gut aussieht.
Leider habe ich noch einen hoizontalen Scrollbalken, der garnicht da sein müsste und den IE interessiert das ganze überhaupt nicht

        #container   {position:absolute;top:0px;left:0px;bottom:0px;right:0px;margin-top:95px;overflow:hidden;z-index:1}
        #topframe   {top:0px;left:0px;height:95px;width:100%;}
        #pagecontent {top:0px;left:0px;height:100%;margin-bottom:95px;overflow:auto;}

Wie bekomme ich das im IE hin und wie verschwindet der Balken?

Thanks for help.

Marcus.

 

[Gumbo]

Ich meine, dass der Internet Explorer die CSS-Eigenschaft overflow-x und overflow-y bereits unterstützt.