zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Sticky Footer klebt auf der Seite beim Scrollen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.10.2010, 17:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.08.2008
Beiträge: 22
nicolafw befindet sich auf einem aufstrebenden Ast
Standard Sticky Footer klebt auf der Seite beim Scrollen

Ich habe ein zentriertes Layout mit einem sticky footer, der am unteren Browserrand hängt. Soweit so gut. Wenn ich nun aber herunterscrolle bleibt der Footer mitten auf der Seite stehen und rutscht nicht mit runter. Was mache ich falsch?

Leo Hackl Coaching | Kurzes Coaching oder lange Therapie?

Am liebsten wäre es mir, wenn er unter dem Text stehen bleibt, wie hier:
Home - Hacklcoaching

Danke für Tipps
Nicola
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.10.2010, 17:42
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hallo

Vergleich mal beide CSS miteinander. In der funktionierenden Variante ist height und min-height 100% drin.

Gruß Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.10.2010, 18:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von nicolafw Beitrag anzeigen
Wenn ich nun aber herunterscrolle bleibt der Footer mitten auf der Seite stehen und rutscht nicht mit runter.
Der Footer orientiert sich am Viewport, du möchtest aber, dass er sich am #wrapper orientiert. #wrapper muss zum Containing Block für die abs. Positionierung werden.
Lesestoff dazu: 12.5.2 Absolute Positionierung kombiniert mit einem umgebenden, relativ positionierten Element - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

edit: Das Clear beim abs. pos. Footer ist übrigens zweckfrei.

Geändert von fricca (27.10.2010 um 18:04 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 01.11.2010, 09:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.08.2008
Beiträge: 22
nicolafw befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62
Vergleich mal beide CSS miteinander. In der funktionierenden Variante ist height und min-height 100% drin.
Hab ich probiert, das ändert nichts.

Zitat:
Zitat von fricca
Der Footer orientiert sich am Viewport, du möchtest aber, dass er sich am #wrapper orientiert. #wrapper muss zum Containing Block für die abs. Positionierung werden.
Danke, das habe gelesen und auch kapiert glaube ich. Ich will auch, dass der Footer sich am Viewport orientiert, wie bei Home - Hacklcoaching Das macht er eigentlich ja auch, nur wenn das Viewport kürzer ist als der Wrapper, bleibt der Footer wenn man scrollt auf dem Text "kleben", statt mit dem Browserrand mit runter zu scrollen.

Wenn ich den Wrapper relativ positioniere, ist der Footer einfach immer unten angehängt, eben am Text orientiert.

Geändert von nicolafw (01.11.2010 um 09:55 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 01.11.2010, 11:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Danke, das habe gelesen und auch kapiert glaube ich. Ich will auch, dass der Footer sich am Viewport orientiert,
Dann willst du keinen sticky Footer, sondern einen fixed Footer. Der wird dann auch so positionert.

Für einen "sticky Footer" (siehe FAQ Punkt 7) fehlt deinem Float auch noch das Clear (siehe FAQ Punkt 2).
Mit Zitat antworten
  #6 (permalink)  
Alt 01.11.2010, 13:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.08.2008
Beiträge: 22
nicolafw befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Dann willst du keinen sticky Footer, sondern einen fixed Footer. Der wird dann auch so positionert.
Oh, dann habe ich das "sticky" falsch verstanden und dachte das klebt dann am Portview.

Danke, mit fixed hat es jetzt geklappt!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Footer soll den Rest der Seite ausfüllen web334 CSS 4 30.11.2010 21:34
cssstickyfooter.com | horizontales Scrollen --> Footer verschwindet daigo CSS 0 19.05.2009 11:56
Footer am unteren Seitenrand positionieren judicious CSS 15 23.06.2005 18:45
im footer unten nicht mitscrollende leiste (div) stepreis CSS 2 11.02.2005 03:31
Footer Problem blub19 CSS 6 25.01.2005 12:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:12 Uhr.