Quelle: Dieses Thema ist weitgehend unter dem Begriff "FooterStick" bekannt und dürfte seinen Ursprung bei Alistapart haben. nach oben
Fußleiste unten, aber noch nicht perfekt Allerdings nutzt nun unser Fußbereich nicht mehr die komplette Breite. Also geben wir dem Fußbereich noch die Anweisung width: 100%; Der gesamte CSS-Code für den Fußbereich position:absolute; bottom: 0; width: 100%; Fußleiste unten über gesamten Inhaltsbereich Allerdings passt das noch nicht ganz. Ist jetzt mehr Inhalt vorhanden, überdeckt der Fußbereich den Inhalt (was i. d. R. nicht gewünscht wird). Html footer immer unten text. Problemfall bei Fußleiste unten durch Überdeckung Der Kniff für "sticky footer" Daher müssen wir dem Fußbereich Platz einräumen. Wichtig ist dazu, dass der Fußbereich eine definierte Höhe hat, damit man dem Bereich Inhalt den entsprechenden Platz in Form von padding-bottom reservieren kann. #inhalt {... padding-bottom: 2em;} #fussbereich {... height: 2em;} Sticky Footer mit viel Inhalt Ist weniger Inhalt auf der Website als Platz, kommt wie gewünscht unten die Fußzeile als "Sticky Footer". Sticky Footer eingesetzt Und nun einmal den kompletten CSS-Code: background-color: orange; background-color: yellow; Viel Spaß beim Einsetzen Weiterempfehlen • Social Bookmarks • Vielen Dank tweet Facebook teilen pin it mitteilen teilen Bitte unterstützen X Bitte unterstützen Sie dieses Projekt Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren:).
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;}
#8 Der Link von prm dürfte dein Problem lösen. #9 sauber=) hat funktioniert. ich möchte euch ja nicht nerven aber der ie bekommt dies irgendwie nicht hin. der css teil hat sich wie folgt geändert: /* ie6+ */ * html #wrapper { height: 100%;} min-height: 100%; min-width:1024px; background-repeat:repeat-x; color:#595959; padding:50px 0px 200px 75px;} hier fliegt der footer quer über die seite und liegt weiterhin auf dem content. getestet habe ich es mit dem ie7 #10 Nimm mal diesen Doctype Code: und lass bei #middle-footer die absolute Positionierung weg. Html footer immer unten browser. Klappt aber damit immer noch nicht. Vermutlich sind einige Divs nicht korrekt geschlossen Ein Link zur Problemseite oder zumindest nochmal der neue HTML-Quelltext wäre hilfreich. Edit: Du musst noch den HTML-Teil etwas umstellen: