div height 100%

Ich brauche mal Hilfe bitte. Ich probiere seit gestern Abend rum, aber bekomme einfach nicht das gewünschte Ergebnis.
Es geht um folgende Seite: Nelly’s Stallgewieher

Meine .css:

[CODE]html, body{
font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
font-size: 8pt;
background: url(…/images/background2.jpg);
background-repeat: x;
width: 100%;
height: 100%
}

#rahmen{
border: solid #000000 1px;
width: 1000px;
margin: auto !important;
margin-bottom: 10px !important;
background-color: #FAF9F3;
-webkit-box-shadow: 5px 5px 15px #0D030C;
-moz-box-shadow: 5px 5px 15px #0D030C;
box-shadow: 5px 5px 15px #0D030C;
min-height: 100%;
height: auto !important;
/height: 100%;/
float: none;
padding-bottom: 8px;
}

#logo{
border-bottom: solid #000000 1px;
height: 232px;
}

#inhalt{
background-color: #FAF9F3;
margin: 5px;
height: auto !important;
min-height: 100%;
height: 100%;
padding: 15px;
}

#navigation{
padding-top: 25px;
padding: 15px;
float: left;
height: 100%;
height: auto !important;
min-height: 100%;
width: 130px;
}

#footer{
background-color: #aa55ff;
margin-bottom: 3px;
text-align: right;
height: 15px;
width: 1000px;
clear: both;
}

A.navnormal{
color: #000000;
font-size: 10px;
text-decoration: none;
}

.center{
font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
text-align: center;
line-height: 1.5;
}

.left{
font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
text-align: left;
line-height: 1.5;
}

h1 {
color: #000000;
font-size: 12px;
}[/CODE]

Ich möchte eigentlich erreichen, dass das inhalts-div auf 100% erweitert wird und dadurch der footer nach unten rutscht. Sobald Text eingefügt ist (siehe Seite Impressum) funktioniert das auch. Solange die Seite aber noch leer ist, wird zwar mein Rahmen-div auf 100% erweitert, aber das inhalts-div nicht. Wo liegt hier mein Denkfehler?

Weiterhin habe ich die Darstellung in IE und FF verglichen und festgestellt, dass auf der Impressum-Seite der Text richtigerweise vollständig rechts der Navigation ausgerichtet wird. Im Firefox verschiebt sich aber der Text unter die Navigation. Braucht FF einen Zusatz?

Danke!

Wenn ich alle meine divs von einem wrapper umschließen würde:

#wrapper{ min-height: 100%; height: auto !important; }

und dann die Höhenangaben der einzelnen divs entferne, würde das funktionieren?
Die Angaben des übergeordneten divs vererben sich ja auf die darunterliegenden, richtig?

Hallo,

also FF brauch kein zusatz sondern brauch nur die richtigen anweisungen IE macht da ein fehler der zufällig bei dir das ist was möchtest :O)

mach mal #inhalt float:right; und gib eine feste breite zb width: 800px;

das mit dem footer seh ich jetzt nicht auf die schnelle woran das liegt.

Cheffchen

aaaahhhhh genau die feste Breite. float:right hatte ich schon, aber die fixe Breite vergessen :smiley:
Danke!

hm, also was das Footer-Problem angeht, hab ich meine .css jetzt mal wie folgt geändert:

[CODE]html, body{
font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
font-size: 8pt;
background: url(…/images/background2.jpg);
background-repeat: x;
width: 100%;
height: 100%
}

#container{
position: relative;
min-height: 100%;
height: auto !important;
}

#rahmen{
border: solid #000000 1px;
width: 1000px;
margin: auto !important;
margin-bottom: 10px !important;
background-color: #FAF9F3;
-webkit-box-shadow: 5px 5px 15px #0D030C;
-moz-box-shadow: 5px 5px 15px #0D030C;
box-shadow: 5px 5px 15px #0D030C;
float: none;
padding-bottom: 8px;
}

#logo{
border-bottom: solid #000000 1px;
height: 232px;
}

#inhalt{
background-color: #FAF9F3;
margin: 5px;
padding: 15px;
width: 800px;
float: right;
}

#navigation{
position: absolute;
top: 250px;
padding-top: 25px;
padding: 15px;
float: left;
width: 130px;
}

#footer{
background-color: #aa55ff;
position:relative;
margin: -7.5em auto 0 auto;
text-align: right;
height: 15px;
width: 1000px;
clear: both;
}

.facebook{
position: absolute;
top: 320px;
padding-left: 5px;
}

A.navnormal{
color: #000000;
font-size: 10px;
text-decoration: none;
}

.center{
font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
text-align: center;
line-height: 1.5;
}

.left{
font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
text-align: left;
line-height: 1.5;
}

.justify{
font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
text-align: justify;
line-height: 1.5;
}

h1 {
color: #000000;
font-size: 12px;
}[/CODE]

Es sieht zwar schon besser aus, aber wenn kein Text auf der Seite erscheint, erstreckt sich der Inhalt nach wie vor nicht auf 100% Höhe. Ich bin echt ratlos diesbezüglich im Moment. Falls noch jemand einen Tipp für mich hätte, wär ich echt dankbar. Ich kann zwar so wie es ist, damit leben (zumal sowieso die meisten Seiten noch ausreichend Text bekommen). Dennoch würd ich für die Zukunft gern eine Lösung finden :neutral:

Dein allumfassendes Element ist nach dem HTML-Aufbau #rahmen und nicht #container.

Ergänze deshalb #rahmen um min-height: 100%; position: relative;

Statte dann #footer aus mit

position: absolute; bottom: 0;

Sorry, hätte ich noch erwähnen solle: Ich teste mit den beiden Unterseiten Impressum und Gebet der Pferde. Auf diesen beiden Seiten hatte ich den #container als umfassendes div eingebaut. Deswegen auch die Angaben

position: relative;
min-height: 100%;

auf #container.

Also müsste ich jetzt ja eigentlich lediglich die Angaben für #footer ändern…ich probier das mal…

Mein letzter Gedanke hat leider nicht funktioniert. Der footer steht dann bei Impressum in der Mitte der seite und der #rahmen wird bzgl. der Größenangabe völlig ignoriert.
Ich hab auch probiert, das container-div zu entfernen und die von dir vorgeschlagenen Angaben auf #rahmen und #footer anzuwenden, aber da bekomm ich das gleiche Ergebnis :frowning:

Der #footer müsste so definiert sein:

#footer{
background-color: #aa55ff;
[COLOR=„#FF0000“] position:absolute;
bottom: 0;

text-align: right;
height: 15px;
width: 1000px;
clear: both;

}

Hab ich geändert, funktioniert aber leider nicht. Hab das Ergebnis mal noch stehen lassen. Der rahmen schrumpft zusammen und der Footer steht mitten auf der seite (beim Impressum).

OK, jetzt sollte es klappen:

Weil du #inhalt gefloatet hast, musst jetzt noch
#rahmen
ein

overflow: auto;

zuweisen.

Vielen lieben Dank! Es hat funktioniert! ;heart
Hab meine html Struktur noch ein wenig angepasst und jetzt ist es genauso wie ich es haben wollte.
Mein code sieht jetzt so aus:

layout.css

[CODE]html, body{
font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
font-size: 8pt;
background: url(…/images/background2.jpg);
background-repeat: x;
width: 99%;
height: 98%
}

#rahmen{
border: solid #000000 1px;
width: 1000px;
margin: auto !important;
margin-bottom: 10px !important;
background-color: #FAF9F3;
-webkit-box-shadow: 5px 5px 15px #0D030C;
-moz-box-shadow: 5px 5px 15px #0D030C;
box-shadow: 5px 5px 15px #0D030C;
float: none;
padding-bottom: 8px;
overflow: auto;
position: relative;
min-height: 100%;
}

#logo{
border-bottom: solid #000000 1px;
height: 232px;
}

#inhalt{
background-color: #FAF9F3;
margin: 5px;
padding: 15px;
width: 800px;
float: right;
position: relative;
min-height: 100%;
}

#navigation{
position: absolute;
top: 250px;
padding-top: 25px;
padding: 15px;
float: left;
width: 130px;
}

#footer{
background-color: #aa55ff;
position: absolute;
bottom: 5px;
text-align: right;
height: 15px;
width: 1000px;
clear: both;
}

.facebook{
position: absolute;
top: 320px;
padding-left: 5px;
}

A.navnormal{
color: #000000;
font-size: 10px;
text-decoration: none;
}

.center{
font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
text-align: center;
line-height: 1.5;
}

.left{
font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
text-align: left;
line-height: 1.5;
}

.justify{
font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
text-align: justify;
line-height: 1.5;
}

h1 {
color: #000000;
font-size: 12px;
}[/CODE]

Meine html-Struktur

[CODE]

[INDENT]
[/INDENT] [INDENT]

[/INDENT]
[INDENT]


[/INDENT]
[INDENT]

[/INDENT]
[INDENT]

[/INDENT]
[INDENT]

[/INDENT]
[INDENT]

[/INDENT]
[INDENT]

[/INDENT]

[/CODE]

Manchmal denkt man aber auch echt viel zu kompliziert :oops: