Sticky Footer (mal wieder)

von **Flyingdutchman** » 07.02.2012, 09:33

Tag an Alle,

nachdem ich 12 unterschiedliche Lösungen aus dem Netz probiert habe (Ansprüche zu hoch?), versuche ich hier mal mein Glück.

Was ich hinzukriegen versuche:

- einen Footer, der immer sichtbar am Boden klebt
- einen Kontentbereich der 1/ unterhalb des Footers liegt und 2/ falls zu groß einen Scrollbalken (nur Y genügt) anzeigt (also keinen Balken im Body, da sich dann immer der Footer mit hoch/runter bewegt)
- wirksam in IE & FF

Hat jemand einen Link auf ein Beispiel dass dies alles schafft?
Danke für eure Reaktionen,
Arthur

von **Flyingdutchman** » 07.02.2012, 11:14

Immer gut wenn man selber die Lösung findet ........

Code: Alles auswählen: body{ overflow: hidden; padding:0px; margin:0px; } #content { height:100%; border:0px solid red; overflow:auto; -moz-box-sizing:border-box;box-sizing:border-box; padding-top:50px; padding-bottom:50px; padding-left:20px; padding-right:20px; } #header { background:url(../img/frame_top.gif) repeat-x; background-position: top left; width: 100%; height: 36px; position: absolute; top:0; left:0; } #footer { background:url(../img/frame_bottom.gif) repeat-x; background-position: bottom left; width: 100%; height: 36px; position: absolute; bottom:0; left:0; }

von **djheke** » 07.02.2012, 19:05

Also, irgendwie funktioniert deine Methode bei mir nicht.

Versuch's mal so.

Code: Alles auswählen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Footer unten</title> <style type="text/css"> * { margin:0; padding:0; } #html, body { height: 100%; } body{ overflow: hidden; } #content { padding:20px; position:absolute; top:36px; bottom:36px; overflow:auto; } #header { height:36px; background:#09c; } #footer { position: absolute; height: 36px; width:100%; bottom:0; background:#09c; } </style> </head> <body> <div id="header">Top</div> <div id="content"> <p>Dein Inhalt</p> </div> <div id="footer">Bottom</div> </body> </html>

Sticky Footer (mal wieder)

Sticky Footer (mal wieder)

Re: Sticky Footer (mal wieder)

Re: Sticky Footer (mal wieder)

Ähnliche Beiträge zu "Sticky Footer (mal wieder)"

Wer ist online?