Oftmals muss der Footer immer am unteren Rand des Browsers stehen, unabhängig von der höhe der Seite. Mit dem Contao-Framework geht das recht einfach. Diese CSS-Anweisungen reichen dafür aus. Zur demonstration sind der Header, Footer und der Container eingefärbt. ✔ - Footer immer ganz unten | tutorials.de. Dieser Code ist noch nicht im Internet Explorer getestet. Wenn es funktioniert kann dieser Hinweis entfernt werden. html, body { margin: 0; padding: 0; height: 100%;} /* LAYOUT */ #wrapper { min-height: 100%; position: relative;} #header { height: 175px; background: red;} #container { background: blue; padding-bottom: 335px; /* Höhe des Footers */} #footer { position: absolute; bottom: 0; width: 100%; height: 335px; background: green;}
Einen Footer-DIV immer ganz Unten anzeigen lassen... hört sich einfacher an, als es ist. #footer { position: absolute; bottom: 0px;}... ist zwar schön und gut, funktioniert allerdings nur, solange der Inhalt nicht länger, als die anzeigbar Höhe ist. Footer am unteren Browserrand positionieren – Contao Community Documentation. Wenn beide Versionen möglich sein sollen, kann man auf folgendes zurückgreifen: HTML
CSS html, body { height: 100%;} #wrapper { position: relative; min-height: 100%; height: auto! important; #content { padding-bottom:contentpx;} bottom: 0px; width: 100%;} Ist euer Inhalt kürzer als die anzeigbare Höhe, befindet sich der Footer am unteren Bildschirmrand, sonst rutscht er mit dem Seiteninhalt nach unten. Chris
Problem: Man legt auf einer HTML-Seite einen Footer an und dieser rutscht, sollte der Inhalt nicht so lang sein, in die Mitte o. in des untere drittel des Bildschirms. Er bleibt auf alle fälle nicht unten, wie man es erwartet. Lösung 1 Man setzt die Eigenschaften des Footer auf "psoition: fixed;", was aber nicht so schön ist weil der Footer dann immer unten bleibt. Egal wie lange der Text ist, der Footer ist unten und überdeckt ggf den Text. Lösung 2 Die ist, meiner Meinung nach die Beste und ich werde sie hier erklären. Wie es funktioniert, worauf man achten sollte usw.. Diese Lösung ist zwar etwas arbeitsintensiever aber es lohnt sich. Html footer immer unten link. 1. Schritt Wir legen eine Schale um den Inhalt und lassen der Footer außen vor. Dumm ausgedrückt, aber wem was besseres einfällt kann mir das mailen. So nun zum Beispiel:
HAEDER