Detlef G.: stiky footer

Beitrag lesen

SELF-Forum

stiky footer

Detlef G.
– Informationen zu den Bewertungsregeln

Hallo Pascal

Mein footer macht nicht was er soll! Ich mache daran nun schon seit Tagen rum aber ich komm auf keinen grünen Zweig.
Das Problem liegt darin das der Inhalt den footer nicht nach unten drückt. Der footer macht es sich genau am unteren Rand eines Fensters bequem und macht keinen wank mehr.

Warum er das macht bzw. wie deine Lösung überhaupt funktionieren soll, kann ich auf die Schnelle nicht nachvollziehen.

Um das ganze mal zu sehen hab ich ein Provisorium hoch geladen...

  • www.globetrotter.ph

Vielleicht ist das Verhalten aufgrund der XHTML- und CSS-Fehler nicht nachvollziehbar.

Wenn der überwiegende Teil der Seiten sowieso höher als die üblichen Browserfenster sind, würde ich auf extra Positionierungen für den Footer verzichten, und diesen als letztes Element der Seite einfach im Elementfluss belassen. Dann ist er immer am Seitenende, wenn auch nicht unbedingt am unteren Rand des Browserfensters.

Wenn ich ihn unbedingt mindestens am Fensterrand haben will, dann würde ich das wohl einfach so machen:

html, body {  
  margin:0;  
  padding:0;                       /* keine Abstände */  
}  
html {  
  height:100%;                     /* html braucht volle Fensterhöhe */  
}  
body {  
  min-height:100%;                 /* mindestens Fensterhöhe, ansonsten so hoch wie das Dokument */  
  position:relative;               /* damit sich position:absolute auf body bezieht */  
}  
* html body {  
  height: 100%;                    /* min-height für 6er IE */  
}  
#footer {  
  position:absolute;               /* absolut an der Unterkante von body ausrichten */  
  left:0;  
  right:0;  
  bottom:0;  
  background-color:#f00;  
  width:100%;  
  text-align: center;  
}  
#content {  
  border-bottom:1.2em solid green; /* Platz für den Footer */  
}  


  <body>  
   <div id="content">  
     Viel Inhalt <br />Viel Inhalt <br />Inhalt - letzte Zeile <br />  
   </div>  
   <div id="footer">  
     Der Footer  
   </div>  
  </body>

In #content kann dann alles eingefügt werden, so lange darauf geachtet wird, dass nichts aus dem Elementfluss genommen wird, oder dieser innerhalb von #content wieder hergestellt wird.

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Beitrag melden
–
Informationen zu den Bewertungsregeln