Footer

[assmaje]

Meine Seite ist 100% hoch. Nun möchte ich, dass der Footer nicht direkt nach dem Inhalt (inklusive margin, padding, etc.) platziert wird, sondern immer am unteren Rand des Browserfensters klebt. Die Seiten, bei denen gescrollt werden muss, sind - logischerweise - okay. Nur bei den Seiten, dessen Inhalt kleiner als 100% ist, soll der Footer UNTEN kleben. Hab schon gegoogelt; die Lösungen sind aber relativ spärlich & kompliziert und passen nicht in mein Layout, wodurch sie nicht mehr funktionieren. Wäre sehr dankbar, wenn mir jemand helfen könnte. ;)

EDIT:
Habe nun doch eine hübsche Lösung gefunden:

Webstandards-Projekt - Zentriertes Layout, 100% Höhe

Das Problem ist nur, dass der Footer den Inhalt (inklusive margin) überlappt. Hier könnt ihr euch das Ganze mal live ansehen. Wäre super, wenn mir jemand ein bisschen helfen könnte! Leider wird mein Post zu lang, wenn ich den HTML-Code auch noch einfüge... Ihr könnt euch ja den Quelltext ansehen. ;)

(Code entfernt)

EDIT 2:
Schwerwiegendes Problem mit anderen Browsern bei der oben genannten "Lösung" entdeckt. Weiß sonst noch jemand, wie ich so einen Footer realisieren kann? ._. Wäre unendlich dankbar! :(

 

[prm]

Hilft dir das weiter?
Layout mit 100 % Höhe bei fixiertem Header und Footer

 

[assmaje]

Hilft dir das weiter?
Layout mit 100 % Höhe bei fixiertem Header und Footer

Sieht so ähnlich aus wie die anderen Lösungen, werds aber mal probieren. :)

EDIT:
Hab mir nur mal die Demo angesehen und es entsteht das gleiche Problem wie vorher. Der Footer überlagert den Inhalt am Ende der Seite, obwohl ich Firefox 3 benutze. :( Allerdings habe ich das mit dem Footer nicht so gemeint. Sondern einfach, dass meine Seite immer 100% hoch sein soll, und das der Footer immer unten bleiben soll, was eben nur bei Seiten Sinn hat, die weniger Inhalt als 100% haben.

 

[prm]

Ich weiß nicht, ob das überhaupt geht, so wie du dir das vorstellst:
Der Footer soll immer unten fixiert sein.
Wenn du den Restinhalt - weil zu hoch - dann scrollen musst, dann bewirkt der fixe Footer doch automatisch, dass er den Inhalt (der nach unten wandert) überdeckt.
Das ginge allenfalls dann, wenn du für Header- und Footerhöhe prozentuale Werte nimmst, die Seite inkl. Margin und Padding max. 100 % hoch ist und du "overflow: hidden" setzt. Allerdings werden dann "zu lange" Inhalte auch nicht angzeigt.

 

[assmaje]

Ich weiß nicht, ob das überhaupt geht, so wie du dir das vorstellst:
Der Footer soll immer unten fixiert sein.
Wenn du den Restinhalt - weil zu hoch - dann scrollen musst, dann bewirkt der fixe Footer doch automatisch, dass er den Inhalt (der nach unten wandert) überdeckt.
Das ginge allenfalls dann, wenn du für Header- und Footerhöhe prozentuale Werte nimmst, die Seite inkl. Margin und Padding max. 100 % hoch ist und du "overflow: hidden" setzt. Allerdings werden dann "zu lange" Inhalte auch nicht angzeigt.

Ich meine keinen fixen Footer, sondern:
The Man in Blue > footerStickAlt: A more robust method of positioning a footer

In Google gibts massig davon, aber es scheint nichts zu funktionieren.

 

[prm]

Ach so, das sollte doch einfach sein:

Du packst einfach alles in eine Hülle:
CSS:

#wrapper {
width: 700px;
margin: 0 auto;
background: #ccc;
}
 
#content {
background: #ECF1EF;
}
 
#footer {
background: #6495ED;
}

HTML:

<div id="wrapper">
 
<div id="content">
Contentinhalt
</div><!--Ende #content-->
 
<div id="footer">
Footerinhalt
</div><!--Ende #footer-->
 
</div><!--Ende #wrapper-->

 

[assmaje]

Das ist doch n ganz normaler Footer. So einen habe ich ja schon lange. Ich suche aber nach einem, der wie auf der obigen Seite beschrieben ist (Seite < 100%: am Ende der Seite; Seite > 100%: normal mitscrollen) - und auch funktioniert.

 

[prm]

Dann geh auf die entsprechende Seite, rechte Maustaste, Quelltext anzeigen, CSS und HTML ansehen und nachbauen.

 

[neuroleptika]

Eigentlich ist das eine simple Sache.
html

<div id="alles">
<div id="innen">
<p>
Hier den Inhalt rein
</p>
</div><!--/innen-->
<div id="fuss">
<p>Fuss</p>
</div><!--/fuss-->
</div><!--/alles-->

css:

html, body {
height : 100%;
}

* {
margin: 0;
padding: 0;
}

#alles {
position: relative;
min-height : 100%;
margin: 0 2em;
font-size: 0.9em;
}

#innen {
padding-bottom: 2.5em;
}

#fuss {
position: absolute;
bottom: 0;
height: 2em;
width: 100%;
}

Wichtig ist, daß #alles min-height: 100%; hat. Der Container soll ja mitwachsen.
Platz für den footer wird mit padding-bottom geschaffen.
Das Element mit padding-bottom darf keine Höhenangabe haben.
padding-bottom würde sonst zu height:100% hinzuaddiert werden.


Für IE6:

* html #alles {
height: 100%;
}

 

[assmaje]

Danke!

Ich muss schon sagen, ich bin beeindruckt. Die Websites, die ich besucht habe, sahen das Ganze als "kompliziert" und "nur mit Tricks zu erreichen" an. Und so sah auch der Code aus...

Eine Frage noch:
In deiner Fassung hast du für den IE 6 height anstatt min-height angegeben (weil der IE min-height nicht versteht), kann es dann überhaupt noch funktionieren?

 

[neuroleptika]

In deiner Fassung hast du für den IE 6 height anstatt min-height angegeben (weil der IE min-height nicht versteht), kann es dann überhaupt noch funktionieren?

Unter height versteht der IE6 min-height.
Er kennt nur das richtige min-height nicht.

kurzum es funktioniert auch im IE6.