✔ knifliges css 100% height problem

[wolliee]

Um es so anschaulich wie möglich zu machen:

http://bechild.de/test/

Das Container habe ich mit einem Background gefüllt und auf 100% gesetzt.
Mit inet explorer wird das Container mit dem gradient BG gefüllt (so wäre es perfect), aber mit firefox wird es nicht bis 100% gefüllt. Firefox braucht eine xxx px angabe um es zu füllen.

Wie kriegt man es hin, dass firefox 100% auch versteht?

Ich wäre für jede hilfe dankbar!

 

[Maik]

Hi,

du musst die Angabe height:100% auch noch für das html-Element deklarieren - also:

html,body{margin:0;padding:0;height:100%;}

 

[soyo]

Probiers mal mit:

html,body {
  height: 100%;
  margin:0;
  padding:0
}

Edit: nagut, etwas zu langsam

Edit2: Spielt die Reihenfolge der Eigenschaften von background eine Rolle? Heißt es nicht eigentlich

background: #5d4d34 url(bgsmallmid.jpg) repeat-y left;

 

[Maik]

Edit2: Spielt die Reihenfolge der Eigenschaften von background eine Rolle? Heißt es nicht eigentlich

background: #5d4d34 url(bgsmallmid.jpg) repeat-y left;

Es spielt keine Rolle, in welcher Reihenfolge die Hintergrundfarbe und das Hintergrundbild angegeben wird.

 

[wolliee]

vielen dank für die schnellen replies.

Es hat geklappt !

 

[wolliee]

leider doch nicht gelöst

Leider hat es mein problem doch nicht komplett gelöst:

Anschauliches Beispiel: http://www.bechild.de/test/

Durch das adden vom height:100% im html,body{margin:0;padding:0} tag
wurde mein problem mit dem 100% FAST height gelöst

bei 1024x768 1280 x 800 zeigt ineternet explorer und firefox alles wunderbar an.

Aber

Wenn ich auf 800x600 mit firefox teste, dann treten die Selben probleme wie früher auf, das es nicht die 100% anzeigt.

Bei Inet explorer mit 800x600 klappt allles gut.

 

[Maik]

Hi,

erweiter mal die Regeln für das DIV #container folgendermaßen:

div#container{
width: 750px;
margin: 0 auto;
background: url(bgsmallmid.jpg) repeat-y left top #5d4d34;
min-height: 100%; /* Für moderne Browser */
height: auto !important; /* Für moderne Browser */
height: 100%; /* Für IE */
}

und füge nach den beiden floatenden DIVs #content und #navigation ein clear-DIV ein, um wieder den normalen Textfluss im Dokument herzustellen:

div.clear {
clear: left;
}

<div id="content">...</div>
<div id="navigation">...</div>
<div class="clear"></div>