2 Spalten voller Höhe Layout in IE6

Question

So versuche ich dies in IE6 zu replizieren: http://lynet.ca/~alumb/layout.html
Es funktioniert perfekt in FF und Chrome, aber scheitert kläglich in IE6. Irgendwelche Vorschläge? Hier

ist der volle Satz von Anforderungen:

+-----------------------------+ 
| NavBar      | 
|-----------------------------| 
|Menu | Content    | 
|  |      | 
|  |      | 
|  |      | 
|  |      | 
|  |      | 
|  |      | 
+-----------------------------+ 

• NavBar ist eine Reihe Höhe in EM (sagen 2em)
• Menü ist eine Reihe Breite in EM (sagen 10em) und füllt auf die
• co: unten auf der Seite
• Es sollte
• Menü muss an Ort und Stelle bewegen und nicht deckt die navbar (scroll wie Überlauf) keine globale Seite scrollbar sein ntent ist ein iFrame, der den gesamten verfügbaren Speicherplatz ausfüllt.
• Layout überleben müssen Sie den Browser

ich CSS versucht haben resising, aber es ergibt sich eine verrückte Menge von CSS und ich kann immer noch nicht die iframe bekommen den Raum richtig zu füllen.
Ich habe versucht, Tabellen, aber ich kann nicht das Menü in der richtigen Weise zu scrollen.
Die einzige Lösung, die ich habe, betrifft Frames, aber das ist nicht wirklich die Route, die ich gehen möchte.

---

Lösung:
So nach etwa 36 Stunden bei ihm bashing, habe ich endlich eine Lösung. Der einzige Weg, dies zu erreichen, war mit Tabellen basierten Layouts. Es gibt jedoch eine Besonderheit in Firefox, die Höhe verursacht: 100% wird anders berechnet als in jedem anderen Browser, also musste ich auch die Position: fixed styling hinzufügen. Dies wird größtenteils von IE6 ignoriert, das auf das Tabellen-basierte Layout zurückgreift.

Ein Beispiel für das endgültige Layout kann hier gesehen werden: http://lynet.ca/~alumb/working.html

Answer 1

mit CSS besonders vertikal Es ist schwer Dimensionen zu mischen. Die navbar ist 2 ems hoch und das Menü ist 100% - 2ems hoch - diese letzte Höhe ist mit reinem CSS schwer zu machen. Möglicherweise müssen Sie es mit JavaScript berechnen.

Eine alternative Lösung besteht darin, dass sich die Seite wie eine normale Webseite verhält, die entworfen wurde (alles in einem Stück scrollen). Hier ist ein Beispiel-Layout, das helfen könnte: Left menu layout (em widths)

Answer 2

Die Lösung ist einfach. Verwenden Sie absolute Positionierung.

body { 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

#NavBar { 
} 


#Menu, #Content { 
    position: absolute; 
    top: 3em; 
    bottom: 0; 
    overflow: auto; 
} 

#Menu { 
    width: 10em; 
} 

#Content { 
    overflow: hidden; 
    left: 10em;   /* #menu.width */ 
    right: 0; 
} 

iframe { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
} 

Damit IE funktioniert, stellen Sie sicher, dass Sie Ihren Dokumenttyp festgelegt haben. Zum Beispiel, fügen Sie das oben in Ihrer HTML-Datei: