Reines CSS minimiert Höhe Header, maximiert Höhe Körper innerhalb eines absolut positionierten DIV

Question

Ich habe einen HTML-Editor-Widget, das ich in einer absolut positioniert ist, mit fester Größe DIV angezeigt werden soll. Aber ich weiß nicht, die absolute Größe des DIV vorher, und es kann sich ändern, wie wenn der Benutzer ändert die Größe des Fensters.

Der Herausgeber, natürlich, hat Kontrollen und einen editierbaren Bereich. Jede hat ihre eigene DIV. Ich möchte, dass die Kontrollen so viel Platz zu nehmen, wie sie brauchen, und die editierbaren Bereich den Rest des Raumes zu füllen.

Wenn ich Tabellen verwenden, ist dies sehr einfach zu erreichen. Ich drehe gerade weg Grenzen und Polsterung und Ränder und jede DIV in eine Zelle in einer eigenen Zeile werfen, und vielleicht Geige mit max-Höhe auf den Kontrollen DIV. Dies ist, wie es aussieht:

Basistabelle http://img407.imageshack.us/img407/8435/table1 .png

selben Tisch mit Fenster eine andere Art und Weise der Größe verändert http://img264.imageshack.us/ img264 / 6438 / table2p.png

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

Ich habe mit verschiedenen CSS-Beispielen und nichts monkeyed scheint, ohne einige JavaScript laufen auf Resize zu arbeiten, um die editierbaren DIV die Höhe der Mutter zu machen minus die Höhe der Kontrollen.

Natürlich kann ich das übergeordnete DIV machen display: table und das Kind eingewickelt DIVs in display: table-row DIVs und sich selbst haben display: table-cell, aber ... na ja ... in diesem Fall ist es genau die gleichen wie mit TABLE, TR und TD, aber zehnmal mehr hässlich aus Gründen der CSS Reinheit. (Warum die Mühe?)

Also, ohne direkt mit display: table & Freunden, noch TABLE / TR / TD, noch JavaScript gibt es eine reine CSS Art und Weise, dies zu tun? Mit anderen Worten, es ist eine reine CSS Art zu sagen, DIV1, nimmt so wenig vertikalen Raum wie möglich und DIV2, nehmen Sie den verbleibenden vertikalen Raum innerhalb des übergeordneten Elements auf?

Wenn nicht, ich bin durchaus bereit, auf die „reine CSS“ -Mentalität zu stoppen abonnieren möchte. Es hat mich genug Kummer mit sehr wenig Entwickler oder Endanwender profitieren.

Answer 1

Sie haben nur so viele Möglichkeiten. Wenn Sie tabellenartige Verhalten wollen, ohne eine Tabelle dann mit verwenden display: table und geben Sie sich die Möglichkeit, Ihre Meinung zu ändern später. Auf diese Weise, während hässlicher im Markup (subjektiv), mehr Sinn für mich macht. Sie mit einem paar mehr Elementen am Ende werden, aber Sie werden nicht in zu einem bestimmten Layout gesperrt werden

Wenn Sie nicht über die Markup kümmern dann abdrücken und eine Tabelle verwenden. Dies wird in den kurzfristigen einfacher sein.

Meine Frage: Wenn Sie JavaScript nicht verwenden möchten, wie Sie Ihren Editor Kontrollen implementieren

Answer 2

Diese Frage spricht zu einem Problem, das ich eine Menge Leute mit in letzter Zeit konfrontiert sehen: gehorcht die „Tabellen verwenden nur für tabellarische Daten-Regel“, oder einfach nur Tabellen verwenden und tut 1/3 die Arbeit. Die Tatsache, dass dies auch eine schwierige Entscheidung ist eine Demonstration, wie standard verrückt wir alle geworden sind. Vergessen Sie die Standards, Tabellen verwenden, um es sauber und einfach erledigt. Wenn W3C ein Problem damit hat, können sie Recht beschweren, nachdem sie eine bessere Alternative schaffen.

Answer 3

Soweit ich für Breite / Höhe mit Prozent wissen sollte okay sein.

Answer 4

Ich würde zweite perfectDay Antwort, aber ich würde fragen Sie verrückt zu gehen und versuchen und beschreiben, was Sie möchten, dass es aussehen. Vielleicht mit ascii-art oder einen Link zu einer Grafik, so wissen wir, was Layout, das Sie möchten, dass wir Sie erreichen helfen.

Ich möchte auch hinzufügen, dass ich noch nicht (wieder) geschlafen vor kurzem, so ... wenn ich eine offensichtliche super-klare Beschreibung verpasst haben, was Sie möchten, dass wir Sie Ihnen mein am meisten helfen zu erreichen haben aufrichtige Entschuldigungen. :)