Div-Layer Problem

Hallo,

ich habe ein Problem mit 2 Div-Layern.

Die Div-Layer liegen direkt untereinander und das eine ist 124px hoch, das andere soll nun den restlichen Bildschirm ausfüllen, also 100%-124px. Außerdem darf sich die Lösung nicht mit dem Attribut overflow:auto; beißen und der Scrollbalken soll nur im unteren Frame angezeigt werden..

Mit CSS3 soll es die Lösung height: calc(100%-124px); geben, wie mir Mudder berichtete, aber bis es soweit ist, suche ich noch eine andere "Übergangslösung"....

Hier noch eine Skizze, die mein Problem genauer schildert:



Gruß
Moo

Was spricht denn gegen das hier, habe ich eben mal zusammengeschustert - funktioniert natürlich nur unter einem Browser mit CSS2 Unterstützung und ist evtl. nicht 100% valid:

style test

#div1 {
background-color:red;
position:fixed; /* oder absolute, je nachdem */
top:0;
left:0;
right:0;
width:100%;
height:124px;
}
#div2 {
background-color:blue;
position:fixed; /* oder absolute, je nachdem */
top:0;
left:0;
right:0;
bottom:0;
width:100%;
margin-top:124px;
overflow-y:auto;
}
















edit: was heißt denn, die lösung muss scrollbar sein, darf sich "also nicht mit overflow:auto beißen"?

naja, ich habe von Mutter eine Lösung bekommen, die funktionierte zwar, aber da war die Scrollbar über die ganze Seite!

Gruß
Moo

PS: Ich test das mal..

Super, deine Lösung hat bis auf eine kleine Schönheitskorrektur gepasst, aus dem overflow-y:auto musste ich noch ein overflow:auto machen! ABer sonst super! Danke vielmals!

Gruß
Moo

EDIT: IE stellt es natürlich nicht da...Da ist der Frame 0px hoch, also nicht sichtbar

Ach .. die Randgruppe, die den IE verwendet kann man doch außen vor lassen ..

Ansonsten versuchs mal mit ner browserweiche .. einfach mal nach googlen und dann machste für den IE ein style und für den FF

Original von Moogly
Super, deine Lösung hat bis auf eine kleine Schönheitskorrektur gepasst, aus dem overflow-y:auto musste ich noch ein overflow:auto machen! ABer sonst super! Danke vielmals!

Gruß
Moo

EDIT: IE stellt es natürlich nicht da...Da ist der Frame 0px hoch, also nicht sichtbar

Ich sagte doch, CSS 2.0 ist dafür notwendig. Das schließt den IE ganz klar aus. (zumindestens, was den position:fixed angeht)

Das mit dem Overflow habe ich immer noch nicht gerafft - ich habe deshalb y genommen, weil ich keinen vertiklen Scrollbalken mache wollte..


Browserfix?

Füge das an (im Header, direkt nach dem anderen "style").

Im Produktiven würde man das ganze dann eh auslagern, aber zum Zeigen reicht es so allemal..

Hinweis: Der Browserfix simuliert den position:fixed Effekt ab IE 5 (Windows), alles andere davor funktioniert mW nicht. Auf der anderen Seite, wer mit einem IE 4 surft, hat es nicht verdient - da sage sogar ich toleranter "Any-Browser"-Befürworter, das so einer es nicht verdient hat, im Internet zu sein

Funktioniert soweit, bis auf, dass keine vertikale Scrollbar im IE vorhanden ist! Außerdem ist der untere Div etwas zu lang, und die SCrollbar geht über den Bildschirm hinaus..


Gruß
Moo

Hm, dann muss ich einen Fehler eingebaut haben. Das Original ist bsp. hier zu finden: http://tagsoup.com/-dev/null-/css/fixed/

Ich glaube auf der Seite wurde nicht an eine definierte Größe mit px gedacht? bzw. eine vertikale Scrollbar außer acht gelassen!

Gruß
Moo

Wieso.. die vertikale Scrollleiste ist doch da?

Mozilla Firefox 1.5.0.1 (CSS 2 support, kein IE-Comment-Support)


MS Internet Explorer 6 (aktuell) (kein vollständiger CSS 2 Support, IE-Comment-Support)


Ich sehe bei beiden vertikale Scrollbalken..

Sorry: Ich mein natürlich die horizontale Scrollbar..

Original von Moogly
Sorry: Ich mein natürlich die horizontale Scrollbar..

Und warum soll die da sein?

In dem Div habe ich eine ISO-Map die über die Bildschirmränder hinausgeht. Darum wäre die horizontale Scrollbar wichtig.
Gruß
Moo

Vorneweg: Scrollbalken immer verhindern, erst recht horizontale.
Den Scrollbalken im Div Layer (siehe mein beispiel) lässt sich insofern "wiederholen", als das man den Overflow für die x-Achse auch wieder aktiviert (hidden = deaktiviert).

overflow-x: auto; ??
Gruß
Moo

Original von Moogly
overflow-x: auto; ??
Gruß
Moo

Aus dem Kopf: ja, aber natürlich nicht für den Body, weil das wäre ja wieder zurück zum Default.