Der Norde: Background-Color-Problem: Höhe eines Divs

Hallo!

Ich habe immer wieder folgendes Problem:

Ich möchte eine Hintergrundfarbe für ein horizontal mittig zentriertes DIV auf einer Seite definieren. Die Hintergrundfarbe soll dabei:

  • immer MINDESTENS so hoch laufen wie das Browserfenster hoch ist
  • ES SEI DENN, der INHALT IST GRÖßER als dasselbe (=> scrollen). DANN SOLLTE DIE HOINTERGRUNDFARBE BEIM SCROLLEN WEITER NACH UNTEN LAUFEN.

Was ich bisher probiert habe:

Wenn ich die Höhe des Divs auf 100% setze (und bei html und body, den einzigen Elternelementen ebenfalls), dann habe ich hinter dem Inhalt sagen wir einen blauen Hintergrund. Ist der Inhalt des Textes jedoch größer als der Bildschirm, so bricht die Hintergrundfarbe danach ab.

Definiere ich die Höhe des DIVs gar nicht, so läuft die Hintergrundfarbe nur soweit, wie Inhalt forhanden ist - sind also nur zwei Zeilen Inhalt da, so bricht auch der Hintergrund ab.

Weis jemand eine Lösung? Muss ich da vielleicht zwei DIVs ineinander verschachteln?

Der Norde

  1. Es gibt sicher ne elegantere Lösung und ist auch nur ne Idee,
    aber kannst du die Höhe nicht auf z.B. 500% festlegen, dann sollte es doch eigendlich immer groß genug sein

    1. Hi,

      aber kannst du die Höhe nicht auf z.B. 500% festlegen, dann sollte es doch eigendlich immer groß genug sein

      und u.U. 5 leere Seiten zum scrollen anbieten? Nee...

      freundliche Grüße
      Ingo

  2. Tachchen!

    Weis jemand eine Lösung?

    Min-height und eines der vielen diebezüglichen Workarounds für IEs. ;-)

    Gruß

    Die schwarze Piste

    --
    ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
    http://www.smartbytes.de
    1. Moinsen!

      Das ist dann wohl die einzige Möglichkeit? Mit Min-height habe ich noch nicht gearbeitet; es wird doch aber von allen Browsern ausser IE interpretiert, oder? Das probiere ich gleich mal aus...

      Aber woher den Workaround für den IE nehmen? Die Seite doppelt codieren hatte ich eigentlich nicht vor, das geht doch hoffentlich recht einfach mit einem Filter a la "* html" oder?

      Hast Du vielleicht einen Link?

      Der Norde

      1. Hallo Der.

        Aber woher den Workaround für den IE nehmen? Die Seite doppelt codieren hatte ich eigentlich nicht vor,

        Hacks gibt es zur Genüge.

        das geht doch hoffentlich recht einfach mit einem Filter a la "* html" oder?

        Das ist kein Filter, sondern einer davon, der sog. Star HTML Hack.

        Gruß, Ashura

        --
        Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
        Try it: Become an Opera Lover in 30 days
        1. Guten Morgen!

          Vielen Dank für den Link; die Hacks kenne ich bereits, aber ist trotzdem gut zum Nachschlagen, wenn man mal nicht weiter weis (Sonst nutze ich gern "CSS-Praxis" von Laborenz).

          Mir ist eher unklar, wie ich die Hacks füllen soll; Im Firefox bekomme ich es noch nicht zum Laufen - woran liegts?

          Der Norde

  3. Guten Tag Der Norde,

    ich habe das Problem bei mir über body {color: #123456;} gelöst; es geht umständlicher natürlich auch über background-attachment: fixed.

    Mit Gruß
    Dada