Frage zu Height = 100% (wieder einmal, sorry :-))

[Coldplayer]

Hallo zusammen!

Ich habe ein sicher bekanntes Problem aber irgendwie kann ich nirgendwo eine sinnvolle Lösung finden, darum poste ich hier mal, vielleicht hat hier jemand einen Tipp. Es geht wieder mal um das lästige Thema Box-Modell.

Auch wenn ich dafür gleich Prügel bekomme muss ich sagen dass ich bis heute finde, dass das Box-Modell von IE sinnvoller und logischer ist als das Box-Modell des W3C *sofern* man HTML-GUIs für Ajax-Anwendungen baut, die Desktop-Anwendungen ähnlich sein sollen (für Websites ist sicher W3C sinnvoller).

Ich denke es ist ein Fehler und eine Verkennung der Realität, dass das W3C hier nicht logisch trennt, für mich liegt ein großer Unterschied darin, ob ich eine Website oder eine WebANWENDUNG entwickle, rein aus UI-Sicht, eine Website ist ein Dokument und eine Webanwendung ist eine GUI und die Anforderungen an Layouts sind imho deutlich unterschiedlich und gerade das führt zu Problemen. Ich hab an ein paar Dutzend teilweise sehr komplexen Ajax-Anwendungen seit 2000 (bevor es Ajax hieß) für große Unternehmen mitentwickelt, d.h. bin kein Anfänger oder so.

Aber ich treffe immer wieder auf das Problem, dass es im W3C-Boxmodell ohne häßlich-langsames JavaScript unmöglich ist, verschachtelte 100%-Höhe-DIVs zu bauen.

Folgendes Problem: ich habe ein Layout, welches mit der Größe des Browserfensters skalieren soll. Dabei kommt es immer wieder vor, dass ich eine DIV mit 100% Höhe habe, in der dann zwei scrollbare DIVs untereinander liegen, die sich den Platz der Parent-DIV teilen sollen, dafür setze ich die Height auf 50%. Nun sollen diese DIVs aber einen Border von 20 Pixel haben, um die Corporate Design-Anforderungen des Kunden sinnvoll abzubilden.

Ein einfaches Beispiel (natürlich nicht so im Code bei mir, aber soll nur das Problem verdeutlichen):

  
  
<div style="height:100%;">  
        <div style="height:50%;background-color:yellow;">  
        <div style="width:100%;height:100%;">  
            <div style="border:20px solid red;height:100%;">  
  
            </div>  
        </div>  
        </div>  
        <div style="height:50%;background-color:yellow;">  
        <div style="width:100%;height:100%;">  
            <div style="border:20px solid orange;height:100%;">  
  
            </div>  
        </div>  
        </div>  
    </div>  
  
  

Im Quirks-Modus des IE sieht das genau so aus wie ich es als GUI-Designer erwarten würde: Zwei DIVs mit Border, die sich die 100% (Browser-Fenster) teilen, aber im Standard-Modus stehen die DIVs über, da ja die Height den Border nicht enthält.

Den gewünschten Effekt erreiche ich also nur mit lästigen JavaScript-OnResize-Handlern, die lahm sind und einen schlechten Eindruck bei komplexen  GUIs hinterlassen. Oder geht das doch irgendwie anders? Ich weiss, über -moz-box-sizing gehts aber das ist auch irgendwie dirty finde ich.

Ich sehe das nur als Beispiel an, warum das W3C-Modell für Webanwendungen prinzipiell ungeeignet ist. Für Websites okay, da ist das Height-Verhalten okay, da man normalerweise die ganze Seite scrollt und nicht einzelne DIVs, aber für GUIs ist der Standard schlecht, falsch und geht an der Realität vorbei und macht nur Probleme. Ich denke, das W3C, das ja Jahrzehnte an eher kleinen Details feilt sollte speziell für GUIs neue Layout-Tags einfüren, z.B. BorderLayout, GridLayout, VBox, HBox etc. das wäre mal eine echte Innovation. Ich habe bereits eine JavaScript-Bibliothek hier intern entwickelt die genau das leistet, die ich demnächst veröffentlichen will, die aber v.a. im Firefox bei vielen Elementen (große Formulare) Performance-Probleme hat, wenn das nativ im Browser wäre, wäre es sicher 100mal schneller als in JavaScript und ich denke das wäre kein großer Act für die Browser-Entwickler und *sicherlich* mehr wert als abgerundete Ecken oder Animationseffekte.

Ich will hier niemand auf den Schlips treten aber ich habe schon mit vielen Leuten gesprochen, die sagen, IE macht alles falsch und schlecht und keiner konnte mir eine Lösung sagen, wie man am Browserfenster skalierbare Layouts ohne redundante, fixe Größenangaben per JavaScript hinbekommt (mit 100% Height und scrollbaren DIVs), was meiner Ansicht nach ein Beleg ist, dass viele Leute, die Websites programmieren etwas mangelnde Weitsicht für GUI-Layouts haben.

Dabei ist ja der Gag, dass es bei der Width mit "width: auto" genau richtig funktioniert ;-) warum dann nicht bei "height" irgendeinen Wert (eben nicht "auto" da anders belegt) der genau den gleichen Layoutalgorithmus wie bei "width:auto" anwendet?

Ich musste das einfach mal in den Raum werfen, wer schon mal echt komplexe GUIs gebaut hat wird sicher "mitfühlen" können, und Leute, die nur einfache Websites mit drei Spalten bauen können ggf. mal die Probleme der anderen besser nachvollziehen.

Vielleicht kennt ja jemand den einen Trick den ich nicht kenne? :-)

MFG Chris