Gerrit: was sind 100%

Hallo liebe Leute,

nach mehreren Tagen Probieren, Recherchieren und intensivem Studium bleibt mir nur noch, Euch um Rat zu fragen.

Annahme:
2 Bereiche: links und rechts, die den gesamten Viewport ausfüllen
Der Bereich links bleibt bei fester Breite (251px)
Der Bereich rechts soll immer bis zum Browserrand rechts gehen
Beide Bereiche sollen immer bis zum Browserrand unten gehen

DAS läßt sich relativ einfach hinkriegen - auch wenn man die eigentliche Idee vom HTML Programmieren verbiegen muß. Egal, CSS macht's möglich :-)
ABER: eben nur bis zu einem gewissen Grad.

Angenommen nämlich im Bereich links steht das Menü. Und das ändert sich in der Höhe - und zwar bis über den dargestellten Browserrand hinaus. Dann stellt mir der Browser, wie erwartet, Scrollbars zur Verfügung. Aber leider zieht er den Bereich rechts unten nicht mit, was er aber soll.

Meine Frage zielt jetzt nicht auf gewisse Hacks ab, sondern soll mal grundsätzlich das Problem klären, ob das überhaupt möglich ist. Ich glaube nämlich mittlerweile: Nein.

Denn:
Ich platziere links ein Div mit Breite 251px.
Gebe ich für dieses Div eine Höhe an, dann wächst diese nicht mit, egal was mit dem Inhalt des Divs passiert - das ist nach CSS 2.0 auch richtig.
OK, also stelle ich die Höhe bspw. mit einem inneliegenden "blinden" Pixel anfangs ein (z.B. über Javascript).
Wenn sich jetzt die Höhe des blinden Pixels ändert, dann ändert sich auch die Höhe des Divs und damit die Höhen von Body und HTML - so soll es sein...

Jetzt:
Ich platziere rechts das zweite Div - ohne Breite natürlich, denn es soll ja bis zum Rand gehen.
Ja, aber wie bekomme ich das Div rechts hin? Über float? Mit Hilfe von position: absolute? Leider bewirken beide Angaben, daß ich das Div zwar wie gewünscht platzieren kann, aber es fällt dann aus der Höhenberechnung für Body raus - welches ja das Elternelement von diesem Div ist. Und das bedeutet, daß egal, ob ich das linke oder rechte Div in der Höhe ändere, das jeweils andere nicht mitmacht. Ergo wäre mein Problem unlösbar :-(

Bevor ich jetzt das Ganze mit dem großen Javascript-Hammer (mit all seinen Nachteilen) in mundgerechte und funktionierende Stücke zertrümmere - denn DAS funktioniert auf jeden Fall - meine Frage an Euch, ob ich so falsch liege?!

Vielen, vielen Dank.
Gerrit

  1. Hi,

    Angenommen nämlich im Bereich links steht das Menü. Und das ändert sich in der Höhe - und zwar bis über den dargestellten Browserrand hinaus. Dann stellt mir der Browser, wie erwartet, Scrollbars zur Verfügung. Aber leider zieht er den Bereich rechts unten nicht mit, was er aber soll.

    Das müsste mit  Faux Columns gehen.

    mfG,
    steckl

    1. Hi,

      Angenommen nämlich im Bereich links steht das Menü. Und das ändert sich in der Höhe - und zwar bis über den dargestellten Browserrand hinaus. Dann stellt mir der Browser, wie erwartet, Scrollbars zur Verfügung. Aber leider zieht er den Bereich rechts unten nicht mit, was er aber soll.

      Das müsste mit  Faux Columns gehen.

      Du hast einen seiner Sätze überlesen:

      Meine Frage zielt jetzt nicht auf gewisse Hacks ab, sondern soll mal grundsätzlich das Problem klären, ob das überhaupt möglich ist. Ich glaube nämlich mittlerweile: Nein.

      Ohne Hacks oder Javascript ist das nicht möglich und wird auch sobald leider nicht möglich sein. Vielleicht in zehn Jahren, nicht viel früher. CSS wird von Mal zu Mal besser, aber bis man damit wirklich seine Gedanken ausdrücken kann, wird es noch sehr sehr lange dauern. Das liegt mitunter auch am IE.

      1. Du hast einen seiner Sätze überlesen:

        Meine Frage zielt jetzt nicht auf gewisse Hacks ab, sondern soll mal grundsätzlich das Problem klären, ob das überhaupt möglich ist. Ich glaube nämlich mittlerweile: Nein.

        Danke, Ganane :-) aber so schlimm war die Antwort von steckl nicht...

        Ohne Hacks oder Javascript ist das nicht möglich und wird auch sobald leider nicht möglich sein. Vielleicht in zehn Jahren, nicht viel früher. CSS wird von Mal zu Mal besser, aber bis man damit wirklich seine Gedanken ausdrücken kann, wird es noch sehr sehr lange dauern. Das liegt mitunter auch am IE.

        Ja, ein leidiges Thema - auch Dir dank für Deine Antwort.
        Wie oben schon erwähnt ist meine Frage ausreichend in dem von Gunther empfohlene Artikel beantwortet worden und ich werde jetzt dieses Wissen versuchen umzusetzen.
        Gruß, Gerrit

    2. Das müsste mit  Faux Columns gehen.

      Hallo Steckl,
      danke für Deine Antwort. Diese Art von Layouts wird mit in dem Artikel erwähnt, den mir Gunther nannte. Und nach dem Studium habe ich mich dann doch für die Block Containing Contex Methode entschieden. Diese "mißbraucht" zwar CSS immer noch irgendwie, ist aber in sich zumindest logisch nachvollziehbar und schlüssig.
      Gruß, Gerrit

  2. Hallo!

    Lies dir mal Grundlagen für Spaltenlayout mit CSS durch.

    Du musst verstehen, was ein "Block Formatting Context" ist.

    Und du musst daran denken, dass einer der Vorteile des Webs ist, dass man sich Webseiten nicht _nur_ auf einem Monitor ausgeben lassen kann.

    Wenn du das alles in dein Layout mit einfließen lässt, solltest du keine Probleme mehr haben - zumindest nicht dieser Art. ;-)

    Gruß Gunther

    1. Und du musst daran denken, dass einer der Vorteile des Webs ist, dass man sich Webseiten nicht _nur_ auf einem Monitor ausgeben lassen kann.

      Wenn du das alles in dein Layout mit einfließen lässt, solltest du keine Probleme mehr haben - zumindest nicht dieser Art. ;-)

      Hallo Gunther,
      DAS war genau das, was ich suchte und ich gestehe: soweit hatte ich die CSS Specs noch nicht durch. Vielen Dank!
      Gruß Gerrit