min-height: 100%: Firefox Darstellung

[martinomat]

EDIT: gelöscht

 

[neuroleptika]

#container {
...
    min-height: 100%;
...
}

#navigation_left {
..
    min-height: 100%;
    height: 100%;
}

Woran koennte es denn liegen?

Du kannst (min-)height nicht in Prozenten angeben wenn das Elternelement selbst min-height hat.
Suche nach footer stick alt und faux columns.

 

[martinomat]

Danke fuer die Tipps, aber leider haben beide nicht den erwuenschten Effekt.

Diese Technik mit dem Column Faux kommt dem ganzen zwar am naechsten, aber ich will die Hintergrund-Grafik nicht festlegen. D.h. ich moechte evtl. die linke und rechte Hintergrundgrafik beweglich machen koennen. Und FooterStickAlt scheint bei mir auch nicht zu funktionieren.
Gibt es denn keine andere Moeglichkeit? Und das mit min-height funktioniert ja im Opera Browser, nur der Firefox spinnt da rum.

 

[neuroleptika]

... Und FooterStickAlt scheint bei mir auch nicht zu funktionieren.
Gibt es denn keine andere Moeglichkeit? Und das mit min-height funktioniert ja im Opera Browser, nur der Firefox spinnt da rum.

Das würde ich als Fehler im Opera bezeichnen.
Safari3.2 (win), ff2, ff3, IE7, IE8 und Opera9.25 ignorieren dieses versachtelte min-height.

ich moechte evtl. die linke und rechte Hintergrundgrafik beweglich machen koennen

Ich verstehe nicht was du damit meinst.

 

[martinomat]

Ok, beweglich war etwas suboptimal ausgedrueckt.
Ich meinte damit, dass ich die 'margins' veraendern kann oder, dass ich meine nav-Bar links bzw. rechts von der Breite immer wieder variieren kann. Ich will also keine fixe Grafik, sondern nur Einzelteile der Hintergrundgrafik, die ich einzelnt 'steuern' kann.
Ok, die Erklaerung ist auch nur suboptimal, aber vllt versteht man es ein bisschen besser.

EDIT:
Wenn man bei dem Style vom 'container' aus 'min-height', 'height' macht und bei navigation_left und navigation_right das 'height: 100%' entfernt und somit nur noch das 'min-height: 100%' stehen laesst, scheint es zu funktionieren. Zumindest teilweise. Das Navigation-Background-Image wird nur maximal so gross wie der Bildschirm. Sobald der Inhalt im 'content' jedoch laenger wird als die max. Bildschirmhoehe, dann veraendert sich die Hoehe der Navigation-Backgrounds nicht mit.

 

[neuroleptika]

...oder, dass ich meine nav-Bar links bzw. rechts von der Breite immer wieder variieren kann.

Also ein fluides Layout mit gleich langen, mitwachsenden Spalten und alle mindestens so hoch wie der Viewport?
Da kenne ich keine faux-columns Variante für.

In einer css-Tabelle kannst du jeder Spalte (Zelle) ein eigenes background-image zuweisen.

<div id="spalten">
<div id="spalten-innen">

<div id="spalte-1">
spalte1
</div>

<div id="spalte-2">
spalte2
</div>

<div id="spalte-3">
spalte2
</div>

</div>

css:

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
font-size: 100%;

}

#spalten {
display: table;
height: 100%;
width: 100%;
}

#spalten-innen {
display: table-row;
}

  #spalte-1,
  #spalte-2,
  #spalte-3 {
display: table-cell;
width: 33%;
}

#spalte-1 {
background-color: darkred;

}
#spalte-2 {
background-color: gray;
}
#spalte-3 {
background-color: darkred;
}

display: table; kennt der IE erst seit Vers.8.
Für ältere IEs würde dieser Hack greifen:
IE5-7

<!--[if lt IE 8]>
<style>
#spalten-innen {
overflow: hidden;
min-height: 100%; /*ie7*/
}

  #spalte-1,
  #spalte-2,
  #spalte-3 {
float: left;
width: 33%;
padding-bottom: 9000px;
margin-bottom: -9000px;
}
</style>
<![endif]-->

 

[martinomat]

Hmm, das waere zwar genau das was ich suche, aber schade, dass es nicht mit divs funktioniert.
Wie wuerde ich denn jetzt zu Deinem Beispiel noch einen Header anhaengen? Also ueber den 3 Spalten noch eine Spalte, die genauso breit ist wie alle drei Spalten zusammen plus ein edefinierte Hoehe. Ich habe es mit 'display: table-column' versucht, aber leider ohne Erfolg.

 

[Toastbrot]

Dafür sollte es eigentlich reichen, wenn du einen weiteren div über dem ganzen einfügst.

 

[neuroleptika]

Hmm, das waere zwar genau das was ich suche, aber schade, dass es nicht mit divs funktioniert.
Wie wuerde ich denn jetzt zu Deinem Beispiel noch einen Header anhaengen?

Bis jetzt besteht das Ganze doch nur aus divs.
#spalten ist mindetens so hoch wie der Viewport. Wenn du da einfach ein Element drüberschreibst rutscht #spalten nach unten und verursacht einen Scrollbalken.

<h1>
überschrift h1
</h1>
<div id="spalten">
...
</div>

Du kannst #spalten mit einem negativen margin für h1 wieder nach oben ziehen:

h1 {
height: 100px;
margin-bottom: -100px;
background-color: pink;
position: relative;
}

Die Inhalte in #spalte-1 - #spalte-3 müsstest du mit einem margin-top entsprechend nach unten schieben:

...
<div id="spalte-1">
<h2>spalte1 h2</h2>
</div>
...

h2 {
margin-top: 100px;
}