Snafu: 100% Höhe & Body mit background-position:bottom

SELF-Forum

100% Höhe & Body mit background-position:bottom

Snafu Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo!
In letzter Zeit war ich nur als Helfer hier tätig aber nun bin ich mit meinem Latein am Ende.
Ich möchte, dass der Inhaltsbereich das Browserfenster von der Höhe her immer voll ausfüllt und für den Body ein Hintergrundbild haben, welches sich immer unten rechts auf der Seite (nicht Viewport) befinden soll.
Wenn der Inhalt immer zu Hoch für das Fenster ist bzw immer zu "niedrig" ist, dann hätte ich kein Problem. Der Hund liegt leider in der gemischten Form, wo der Inhalt einmal den Viewport sowieso sprengt aber ein anderes Mal eben nicht.
Ich hab html und body auf height:100%; und meinen #wrapper auf min-height:100%; damit er sich ausdehnt, falls der Inhalt mal länger wird. Soweit passt alles.
Ist der Inhalt nun aber zu hoch / lang, dann zieht sich zwar mein #wrapper schön in die Länge aber mein verfluchter body dehnt sich nicht aus und somit ist mein body Hintergrundbild nicht unten rechts sondern bei der Viewportgrenze rechts. So siehts jedenfalls beim FF 3.0.1 aus.

Wie bekomm ich das so gebacken wie ich es haben will? Zu meiner Verzweiflung musste ich nun feststellen, dass der IE 7 es "richtig" darstellt.

Am besten ihr schaut es euch einfach bei der Beispielseite an, erklärt sich eigentlich alles von selbst. Mehr/weniger Inhalt erhält man mit einem Klick auf "More".

Link steht oben und hier nochmal: http://stuff.c-gabriel.at/foo.html
Hoffe ihr könnt mir helfen.

--
LG,
Snafu
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 100% Höhe & Body mit background-position:bottom

    vaudi
    – Informationen zu den Bewertungsregeln

    Hallöchen,

    hab ne gute und ne schlechte Nachricht.

    Die Schlechte zuerst: an einer fast identischen Aufgabenstellung (Fußleiste bei kurzem Inhalt am unteren Viewportrand, bei langem Inhalt am Inhaltsende) bin ich mit CSS vor kurzem auch gescheitert.

    Die Gute: Mit einer Tabelle geht es. Minimal-Code (border="1" hier nur, damit die Position deutlich wird):

      
<body>  
<div align="center">  
  <table height="100%" width="800" border="1" cellpadding="0" cellspacing="0">  
   <tr>  
    <td height="100">Kopfbereich</td>  
  </tr>  
  <tr>  
    <td>Inhalt</td>  
  </tr>  
  <tr>  
    <td height="50">Fußleiste</td>  
  </tr>  
  </table>  
</div>  
</body>

    Kopier mal deinen Test-Text rein und probier aus. Funktioniert mit FF und IE.

    Zugegeben eher eine Notlösung und ohne CSS, aber funktioniert. Ob für dich wirklich brauchbar hängt von der konkreten Aufgabenstellung ab.

    MfG
    vaudi

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 100% Höhe & Body mit background-position:bottom

      vaudi
      – Informationen zu den Bewertungsregeln

      Hallöchen,

      Nachtrag:
      Damit es richtig funktioniert,

      -> MUSS für die obere und untere Zeile height="Pixelwert" definiert sein,
      -> DARF ABER NICHT für die mittlere Zeile definiert sein, d.h. dort KEIN height-Attribut

      MfG
      vaudi

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. 100% Höhe & Body mit background-position:bottom

        Snafu
        – Informationen zu den Bewertungsregeln

        Schei*e!
        Hab schon befürchtet, dass ich da eine Tabelle misbrauchen muss.
        Vl nehm ich aber doch die Alternativlösung und geb dem Hintergrundbild beim Body background-attachment:fixed;. Ist zwar nicht das was ich wollte aber dafür brauch ich keine Tabelle.
        Schon faszinierend wie etwas so einfaches doch (noch) nicht ohne Tabelle geht :(

        --
        LG,
        Snafu
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln