Reine CSS-Kopfzeile mit minimaler Höhe, maximierter Körper in einem absolut positionierten DIV

Question

Ich habe ein HTML-Editor-Widget, das in einem absolut positionierten DIV mit fester Größe erscheinen soll. Ich kenne jedoch die absolute Größe des DIV vorher nicht, und es kann sich ändern, wenn der Benutzer die Größe des Fensters ändert.

Der Editor verfügt natürlich über Steuerelemente und einen bearbeitbaren Bereich. Jeder hat sein eigenes DIV. Ich möchte, dass die Steuerelemente so viel Platz wie nötig einnehmen, und der bearbeitbare Bereich den Rest des Platzes ausfüllen kann.

Wenn ich Tabellen verwende, ist dies extrem einfach zu erreichen. Ich schalte nur Ränder und Abstände und Ränder ab, und werfe jedes DIV in eine Zelle in seiner eigenen Reihe und fiddle vielleicht mit maximaler Höhe auf den Kontrollen DIV. Dies ist, wie es aussieht:

Base table http://img407.imageshack.us/img407/8435/table1.png

Same table with window resized another way http://img264.imageshack.us/img264/6438/table2p.png

Beachten Sie den bearbeitbaren Abschnitt so viel Platz wie möglich Aufnahme ohne Scrollbalken verursacht zu erscheinen.

Ich habe mit verschiedenen CSS-Beispielen gespielt und es scheint nichts zu funktionieren, ohne dass JavaScript bei der Größenänderung ausgeführt wird, damit der bearbeitbare DIV die Höhe des Elternelements minus der Höhe der Steuerelemente ist.

Natürlich kann ich die Eltern DIV Display haben: Tabelle und die Kinder DIVs in Display verpackt: Tabellen-DIVs und selbst haben Display: Tisch-Zelle, aber ... nun ja ... in diesem Fall ist es genauso wie mit TABLE, TR und TD, aber zehnmal hässlicher wegen der CSS-Reinheit. (Warum stören?)

Also, ohne direkt mit Display: Tabelle & Freunde, noch TABLE/TR/TD, noch JavaScript, gibt es eine reine CSS-Möglichkeit, dies zu tun? Mit anderen Worten, gibt es eine reine CSS-Art zu sagen, DIV1, nehmen Sie so wenig vertikalen Raum wie möglich, und DIV2, nehmen Sie den verbleibenden vertikalen Raum innerhalb der Elternelement?

Wenn nicht, bin ich bereit, die "reine CSS" -Mentalität zu beenden. Es hat mir genug Kummer bereitet mit sehr wenig Entwickler- oder Endnutzer-Nutzen.

Answer 1

Sie haben nur so viele Möglichkeiten. Wenn Sie tabellenartiges Verhalten ohne Verwendung einer Tabelle möchten, dann verwenden Sie display: table und geben Sie sich die Möglichkeit, Ihre Meinung später zu ändern. Auf diese Weise, während sie im Markup (subjektiver) hässlicher ist, macht es für mich mehr Sinn: Sie werden mit ein paar mehr Elementen enden, aber Sie werden nicht an ein bestimmtes Layout gebunden sein.

Wenn Ihnen das Markup nicht wichtig ist, ziehen Sie den Trigger und verwenden Sie eine Tabelle. Dies wird auf kurze Sicht einfacher sein.

Meine Frage: Wenn Sie JavaScript nicht verwenden möchten, wie werden Sie Ihre Editorsteuerelemente implementieren?

Answer 2

Soweit ich weiß, die Verwendung von Prozent für Breite/Höhe sollte gut funktionieren.

Answer 3

Diese Frage spricht für ein Problem Ich sehe eine Menge Leute in letzter Zeit konfrontiert: Gehorchen Sie der Regel "nur Tabellen für tabellarische Daten verwenden", oder verwenden Sie einfach Tabellen und machen 1/3 der Arbeit. Die Tatsache, dass dies sogar eine schwierige Entscheidung ist, ist ein Beweis dafür, wie verrückt wir alle geworden sind. Vergessen Sie die Standards, verwenden Sie Tabellen, machen Sie es sauber und einfach. Wenn W3C ein Problem damit hat, können sie sich beschweren, nachdem sie eine bessere Alternative erstellt haben.

Answer 4

Ich würde perfectDay die Antwort geben, aber ich würde Sie bitten, verrückt zu werden und zu versuchen zu beschreiben, wie es aussehen soll. Vielleicht mit Ascii-Art oder einem Link zu einer Grafik, so dass wir wissen, welches Layout wir Ihnen helfen sollen.

Ich würde auch hinzufügen, dass ich kürzlich (wieder) nicht geschlafen habe, also ... wenn ich eine offensichtliche super-klare Beschreibung von dem vermisse, was Sie möchten, dass wir Sie erreichen, haben Sie meine aufrichtigsten Entschuldigungen. :)