Frage von Croghs, 62

footer in HTML unten, aber ohne fixed?

Hallo Community, ich versuche grade, einen Footer hinzubekommen, der nicht position:fixed ist, den man also nur sieht, wenn man ganz nach unten scrollt. Aber der footer soll sich ganz unten am Seitenende befinden (weshalb ich dies nicht mit margin machen möchte/würde). Weiß jemand, wie dies möglich ist?

Danke und MfG

Croghs

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von perhp, 46

Das ist doch ganz einfach. Lösche einfach das position fixed weg, dann verhält es isch wie ein normales Element auf der Seite, andernfalls kannst du auch position relative machen. Wenn ich mir die Seite 'stuport.de' anschaue, dann sehe ich das derjenige, der diese Seite gemacht hat, sich nicht wirklich mit CSS auskennt, da der Footer ja nur ein normales Element auf der Seite ist und das position fixed total überflüssig ist.

Kommentar von Croghs ,

Dann nimm doch mal im Inspektor position:fixed weg, und schon ist es nicht mehr am unteren Rand (?)

Kommentar von perhp ,

Dann geht es natürlich unter diesen Boxen. Du kannst dann entweder einen Platzhalter reinmachen, das Problem mit Margin lösen oder den Body auf 100% aufspannen und die Box positon absolute machen.

Ich korrigiere nochmal die Antwort oberhalb, in diesem Fall wäre es wohl das beste mit position fixed zu arbeiten, allerdings wenn der Content-Bereich mehr Inhalt hat, als diese Seite, müsste man eine andere Methode wählen.

Kommentar von Croghs ,

Also mit Margins wollte ich das eigentlich nicht machen, da dies dann wieder Probleme mit den Handys verursacht... Und das body auf 100% aufspannen und den footer absolute zu machen, hilft auch nicht, dann kann ich auch gleich position:fixed nehmen. Mein Problem ist, dass ich es gerne so haben würde, dass wenn man die Höhe des Fensters ändert, sich die footer-leiste nicht über die Tabelle in der Mitte legt...

Kommentar von perhp ,

Du kannst ja zu Beginn position Fixed machen und sobald man eine gewisse Fenstergröße erreicht, änderst du das Element auf position relative

Kommentar von Croghs ,

Okay dankeschön für deine Zeit und Hinweise ;)

Antwort
von Steffile, 42

Nicht so komplizert denken :) Wenn der footer nicht position absolute oder fixed ist, dann befindet er sich natuerlichweise unten nach dem content. Wenn du keinen space nach dem footer haben willst, musst du margin und padding bottom des containers, in dem der footer liegt, auf 0 stellen

Kommentar von Croghs ,

Hab ich eigentlich schon, klappt aber nicht... Guck mal auf stuport.de vorbei, da ist es noch mit position:fixed (also wie ich es nicht mehr haben will, aber so ist es dann eben unten)

Kommentar von Steffile ,

Ach, kenne ich das nicht? ;-)

Okay, ich sehe, dass du den Footer auf der niedrigen Startseite unten angeklebt brauchst, weil der Content zu kurz ist. Auf den inneren Seiten wird vermutlich mehr Inhalt sein, sodass du den Footer nicht ankleben brauchst.

Du koenntest quick & dirty dem body der startseite eine ID geben, z.B. home, und den Footer nur fuer diese Seite fixed machen. Also 

#body .footer {position fixed; bottom:0; left: 0}

Oder einen echten sticky footer machen, der an alle Seiten anpasst, Anleitung hier:

http://codepen.io/chriscoyier/pen/uwJjr

Antwort
von Kompaktdesign, 19

Wenn der Footer erst durch Scrollen sichtbar sein soll, sollte sich das eigentlich so ganz einfach umsetzen lassen:

HTML:

<div class="seite">... Inhalt der Seite ...</div>
<footer>... Inhalt vom Footer ...</footer>

CSS:

HTML {height:100%;}
.seite {min-height:100%; display:block;}

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten