Encoder: immer bis zum Boden

Hallo
Mein Layout hat eine Spalte mit Hintergrundbild. Aus optischen Gründen soll dieses immer bis zum unteren Rand des Browserfensters gehen. Ich finde etliche Links über faux columns, Lösungen mit Javascript und sonstiges. Was ich nur ansatzweise gefunden und selber fertig gebastelt habe ist das da
html, body { height:100%; }
#meineSpalte { min-height:100%; }

Funktioniert bei mir in drei Browsern wunderbar. Was stimmt an dieser Lösung nicht dass ich praktisch nichts darüber finde? Lässt sich das noch optimieren oder robuster machen?

Warum muss height sowohl bei body als auch html gesetzt werden? Warum geht es bei diesen beiden Elementen nicht mit min-height? Dann ist die Höhe wieder nur so hoch wie der Inhalt es erfordert.

  1. Hi,

    html, body { height:100%; }
    #meineSpalte { min-height:100%; }

    Funktioniert bei mir in drei Browsern wunderbar. Was stimmt an dieser Lösung nicht dass ich praktisch nichts darüber finde?

    Daran stimm u.U. nicht, dass Inhalt der über die 100% Höhe hinaus geht den body dann nicht ebenfalls vergrößert, sondern über seine untere Grenze hinaus fließt.

    Warum muss height sowohl bei body als auch html gesetzt werden?

    Weil die Höhe von body sonst vom Inhalt bestimmt wird, und wenn dieser wiederum die (Mindest-)Höhe eines Kindelementes bestimmen soll, hast du eine unlösbare Gleichung.

    Warum geht es bei diesen beiden Elementen nicht mit min-height?

    Weil das ebenfalls unlösbar ist – du kannst nicht das Minimum aus 100% und einem unbekannten Wert bestimmen. (Die Höhe von body würde wiederum vom Kindelement abhängen und die Höhe dieses Kindelementes andersherum von der von body.)

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. Hört sich alles schlüssig an :-)

      Daran stimm u.U. nicht, dass Inhalt der über die 100% Höhe hinaus geht den body dann nicht ebenfalls vergrößert, sondern über seine untere Grenze hinaus fließt.

      Hab ich mit border ausprobiert, stimmt. In meinem Fall macht das nichts aus oder anders gesagt dieser Effekt ist nicht sichtbar. Trotzdem würde mich interessieren, geht es besser?
      Anders gesagt die Ansätze die ich gefunden habe machen alle einen inoffiziellen Eindruck für dieses Vorhaben. Was würdet ihr mir empfehlen?

      1. Hi,

        Trotzdem würde mich interessieren, geht es besser?

        Eine Mindesthöhe, die der Viewporthöhe entspricht, bekommst du unabhängig von den Vorfahren eines Elementes, wenn du die Einheit vh verwendest. Für die Browser, die diese noch nicht unterstützen, dann entweder einen Fallback implementieren (z.B. wieder die 100% Methode verwenden) – oder darauf verzichten, wenn es sich nur um einen optischen Effekt handelt, der nice to have ist, aber nicht absolut erforderlich.

        MfG ChrisB

        --
        Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
  2. Hi

    Funktioniert bei mir in drei Browsern wunderbar. Was stimmt an dieser Lösung nicht dass ich praktisch nichts darüber finde? Lässt sich das noch optimieren oder robuster machen?

    also ich benutze für den Vollbildhintergrund immer folgendes:

    <img id="img" class="bgImg" src="img/image.jpg" >

    /* BG-Image auf unterste Ebene anordnen opacity: 1; */  
    .bgImg{  
    	position: fixed;  
    	/*entweder so */	  
            /*height: 100%;  
    	width: height*1.33; */  
                  /*1.333 Verhältnis breite/höhe Bild */  
    	/*oder so */	  
    	width: 100%;  
    	height: width/1.333;		  
    	top: 0;  
    	left: 0;  
    	border: 0;  
    	z-index: 0;  
    }	
    

    Hat dann so was von Bing.de ;-)

    Viele Grüße aus LA

    --
    ralphi
    1. @@ralphi:

      nuqneH

      also ich benutze für den Vollbildhintergrund immer folgendes:
      <img id="img" class="bgImg" src="img/image.jpg" >

      img ist kein Hintergrund.

      Für Hintergrundbilder (CSS: backgroung-image) gibt es die Eigenschaft background-size mit den Werten contain und cover.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. Hi Gunnar,

        Für Hintergrundbilder (CSS: backgroung-image) gibt es die Eigenschaft background-size mit den Werten contain und cover.

        Hab ich mit background-size nicht hinbekommen. Ist schon länger her - kann dir also nicht sagen warum. Hatte auf jeden Fall kein unverzerrtes Bild im Hintergrund als Vollbild 'ala' Bing.

        Viele Grüße aus LA

        --
        ralphi
        1. Om nah hoo pez nyeetz, ralphi!

          Für Hintergrundbilder (CSS: backgroung-image) gibt es die Eigenschaft background-size mit den Werten contain und cover.

          Hab ich mit background-size nicht hinbekommen. Ist schon länger her - kann dir also nicht sagen warum. Hatte auf jeden Fall kein unverzerrtes Bild im Hintergrund als Vollbild 'ala' Bing.

          Die Browserunterstützung ist inzwischen vollumfänglich.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Lake und Laken.