Klaus: Problem bildschirmfüllendes Layout

Hallo,

ich würde gerne mit CSS und div-Containern, falls möglich ohne Tabelle, folgendes Layout realisieren:

  • die Seite soll 970px breit sein und horizontal zentriert (ist mir klar und kein Problem)

  • vertikal möchte ich eine Dreierteilung haben:

*****************************************
*                                       *
* 1. Header mit der Höhe 100px    *
*                                       *
*****************************************
*                                       *
*                                       *
* 2. Content mit der Höhe 100%    *
*                                       *
*    (100% bzgl. verbleibender Höhe)    *
*                                       *
*****************************************
*                                       *
* 3. Footer mit der Höhe 20px     *
*                                       *
*****************************************

Dabei soll das Content-Fenster aber immer die gleiche Höhe haben, so dass der Footer-Container quasi als Statuszeile immer am gleichen Platz bleibt! Ist der Inhalt des Contents zu hoch für den Bildschirm, soll der Content-Container scrollbar werden.

Wer kann mir helfen?

lg Klaus

  1. Hi Klaus

    Für den Footer könntest du dies hier versuchen:

    http://www.themaninblue.com/writing/perspective/2005/08/29/

    Ich hab mir den Code nicht genau angeguckt, aber er scheint zu funktionieren.

    Cheers

    Uwe
    Portland, Oregon

    1. http://www.themaninblue.com/writing/perspective/2005/08/29/

      Ich hab mir den Code nicht genau angeguckt, aber er scheint zu funktionieren.

      uwe,
      Anscheinend nicht. Kein feststehender Footer zu sehen.

      Live long and prosper,
      Gunnar

      --
      „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
      1. Gunnar

        Klick auf den Link "footerStickAlt" oben auf der Seite.

        Uwe

    2. Hallo Uwe,

      danke für den Hinweis, allerdings wandert der Footer ja nach unten bei langem Content, das wollte ich nicht!

      lg Klaus

    • die Seite soll 970px breit sein und horizontal zentriert (ist mir klar und kein Problem)

    Klaus,
    Das ist durchaus ein Problem, nur dass dir das noch nicht klar ist.

    Nicht jeder Nutzer hat einen Viewport von mindestens 970px Breite (niedrigere Auflösung, Browserfenster nicht über ganzen Bildschirm, Sidebars, …), und erzwungenes horizontales Scrollen ist nicht nutzerfreundlich.

    so dass der Footer-Container quasi als Statuszeile immer am gleichen Platz bleibt!

    Also <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=fixe Positionierung>. Dumm nur, dass IEs das nicht können; da könnte man vielleicht mit JavaScript was basteln. (Wobei aber gerade IEs Grund genug geben, JavaScript abzuschalten; wobei aber gerade IE-Nutzer das nicht wissen und auch gar nicht wissen, dass man JavaScript abschalten kann.)

    Live long and prosper,
    Gunnar

    --
    „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
    1. Hallo Gunnar,

      Nicht jeder Nutzer hat einen Viewport von mindestens 970px Breite (niedrigere Auflösung, Browserfenster nicht über ganzen Bildschirm, Sidebars, …), und erzwungenes horizontales Scrollen ist nicht nutzerfreundlich.

      Darüber läßt sich wahrscheinlich trefflich streiten! Bei meiner Seite arbeite ich mit Tabellen mit entsprechend vielen Spalten, so dass man bei einer kleinen Bildschirmauflösung entweder scrollen muss oder häßliche Zeilenumbrüche hat! Was ist nun nutzerfreundlicher?

      so dass der Footer-Container quasi als Statuszeile immer am gleichen Platz bleibt!

      Also <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=fixe Positionierung>. Dumm nur, dass IEs das nicht können; da könnte man vielleicht mit JavaScript was basteln. (Wobei aber gerade IEs Grund genug geben, JavaScript abzuschalten; wobei aber gerade IE-Nutzer das nicht wissen und auch gar nicht wissen, dass man JavaScript abschalten kann.)

      Wir würde ich es bei Mozilla und Opera hinbekommen? Mir ist auch bei absoluter Positionierung nicht klar, wie ich das Content-Fenster, egal ob leer oder überfall, auf 100% des Rests der Bildschirmhöhe halte??

      Danke für weitere Tipps
      Klaus

      1. erzwungenes horizontales Scrollen ist nicht nutzerfreundlich.
        Darüber läßt sich wahrscheinlich trefflich streiten!

        Klaus, was gibt’s da zu streiten?

        Bei meiner Seite arbeite ich mit Tabellen mit entsprechend vielen Spalten,

        Sind da tabellarische Daten drin oder sind das Layout-„Tabellen“?

        Wenn erstes, ist Pixel für die Angabe der Breite her kein geeignetes Maß.

        Wenn zweites, bist du derselbe Klaus wie der OP?

        ich würde gerne mit CSS und div-Containern, falls möglich ohne Tabelle, folgendes Layout realisieren

        so dass man bei einer kleinen Bildschirmauflösung entweder scrollen muss oder häßliche Zeilenumbrüche hat! Was ist nun nutzerfreundlicher?

        Ein flexibles Layout, dass sich an die Verhältnisse beim Nutzer anpasst, ohne dabei hässlich zu sein.

        Also <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=fixe Positionierung>.
        Wir würde ich es bei Mozilla und Opera hinbekommen? Mir ist auch bei absoluter Positionierung nicht klar, wie ich das Content-Fenster, egal ob leer oder überfall, auf 100% des Rests der Bildschirmhöhe halte??

        Wozu absolute Positionierung des Content-Fensters? Ich sprach von fixer Positionierung des Footers.

        Live long and prosper,
        Gunnar

        --
        „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
        1. Hallo Gunnar.

          erzwungenes horizontales Scrollen ist nicht nutzerfreundlich.
          Darüber läßt sich wahrscheinlich trefflich streiten!

          Klaus, was gibt’s da zu streiten?

          Ob es gut vermittelt wird beispielsweise?

          Einen schönen Freitag noch.

          Gruß, Ashura

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          mathbr:del.icio.us/ mathbr:w00t/