• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Sticky Footer und Flexbox?

A

annsen

Mitglied
Hallo,

ich habe in den letzten Tagen zahlreiche Dinge versucht aber bisher keine Lösung/Erklärung gefunden.
Ich möchte einen Sticky Footer per Flexbox umsetzen und das funktioniert nicht. Umgesetzt wie HIER beschrieben.

Das Problem: sobald eine Seite länger ist als der Viewport (und der Footer nicht direkt im Bild), wird beim Übergang von "Header" zu "Main" das Layout ein paar Pixel verschoben. Wenn man jetzt von einer Seite die wenig Inhalt hat auf eine Seite geleitet wird die "Überlänge" hat, fällts auf...

Hat jemand von euch die Problematik schonmal festgestellt oder einen Hinweis warum das so ist? Ich habe mir jedes einzelne Element mehrmals genau angesehen aber ich finde keine Ursache...

Vielen Dank für Tipps und Hinweise!
 
Werbung:
Hallo

Deine Problembeschreibung kann ich nicht bestätigen. Zeig mal deine Beispielseite.

Oder läßt du dich durch die Scrollleiste irritieren, die erscheint, sobald der Seiteninhalt die Seitenhöhe von 100% überschreitet?

Gruss

MrMurphy
 
MrMurphy schrieb:
Deine Problembeschreibung kann ich nicht bestätigen. Zeig mal deine Beispielseite.
Zum Vergrößern anklicken....

LINK

Die Startseite und die Seiten "Bereich 1 / 2 / 3" sind "kurze" Seiten. Die Seite hinter Menüpunkt "B" und das Impressum (Footer) sind Seiten mit viel Inhalt...

Beim Klick zwischen Seiten mit langem/kurzem Inhalt, springt der Übergang von "header" zu "main".

Kannst du mir einen Tipp geben warum das so ist?
 
Werbung:
Hallo

Ich habe mir die Seiten im Firefox und im Chrome angeschaut. Die Verschiebung tritt bei mir nicht auf. Deshalb kann ich das Problem leider nicht nachvollziehen.

Gruss

MrMurphy
 
Sorry, vielleicht hätte ich die Abmessungen verändern sollen.

Man sieht es wirklich nur(!!) , wenn die Seite neu geöffnet wird und der Footer dabei OHNE die Seite zu scrollen zu sehen ist.

Auf kleineren Displays ist das in der Regel nicht der Fall - hier ist der Footer ja nicht direkt beim ersten Laden der Seite zu sehen - dadurch tritt der Fehler auch nicht auf (was auch ein Punkt ist, den ich nicht verstehe) - die Abstände auf den Seiten sind exakt gleich.

Auf meinem großen Monitor (27"), wo der Footer beim ersten Aufrufen der Seite KOMPLETT mit angezeigt wird, tritt das Problem auf - am Notebook (16")nur, wenn ich den Anzeigenzoom auf 80 Prozent oder kleiner drehe.

Bei gleicher Zoomstufe erkennt man es am besten an dem Abstand vom Bild-Platzhalter zum header-main-Übergang.

Ich habe auch nochmal 2 andere Rechner testen können - Firefox und Chrome das Problem besteht aber erklären kann ich es nicht...
 
Werbung:
Welche "margins" hast du da direkt im Auge?

Die Vermutung zu den margin´s hatte ich auch - aber da ich wirklich jedes Element in den Entwicklerwerkzeugen (mehrmals) überprüft/verglichen hab, bin ich davon abgekommen... Bei allen Seiten sind ja die Elemente (die mit margin) gleich verteilt. Der Footer ist bei allen gleich, "main" unterscheidet sich nur durch Inhalte - nicht durch definierte Außenabstände und der "header" ist auch gleich gestaltet. Es gibt zwar nur einen Kontaktbutton auf der Startseite aber die verhält sich genauso wie die 3 Bereichsseiten ohne Button.

Der Fehler tritt auf, bei den Seiten "Menüpunkt B" und beim "Impressum" - das was bei diesen Seiten von den anderen abweicht ist die H1 (die Überschriften in "main") - die haben Start- und Bereichsseiten nicht. Aber hier gibts keine margins...

Mich hat auch durcheinander gebracht, dass das nur auftritt, wenn der Footer voll abgebildet wird - wenn es die Außenabstände wären, müsste das doch immer auftreten, oder?
 
Informiere dich mal über das Box-Modell hinsichtlich padding und margin.

Wenn ich auf meinem Macbook Pro mit 1440x900 Auflösung die margins abschalte, ist der Footer im Sichtbereich, ansonsten außerhalb.

TL;DR: Verwende padding statt margin.
 
Oh - ich glaub ich hab das blöd beschrieben... ich versuchs nochmal...

Grundsätzlich möchte ich, dass bei wenig Inhalt der Footer unten "klebt" ("sticky" ist) und bei langen Seiten ganz normal unter dem Inhalt erscheint. Und das würde ich gern per flexbox umsetzen.

Dass der Footer sichtbar wird (nach oben rutscht), wenn ich die Abstände (margins/paddings) oder Bereiche des Inhalts mittendrin raus nehme, ist klar und zu erklären - der Footer rutscht dann ja nach oben...

Das Problem betrifft den Verlauf der Grenze zwischen header und main - auf der Beispielseite sind die Bereiche durch die Farben "Grün" und "Weiss" gekennzeichnet. Diese Grenze "springt" ein paar Pixel in der Höhe - je nachdem ob ich eine "kurze" Seite (Footer ist ohne scrollen zu sehen) oder eine "lange" Seite (Footer ist nur durch scrollen zu sehen) aufrufe. Ich hab 2 Seiten parallel in 2 Tabs geöffnet)

kurze Seiten (wenig Inhalt):
- Startseite
- Bereich 1
- Bereich 2
- Bereich 3

lange Seiten (viel Inhalt):
- Menüpunkt B
- Impressum

WICHTIG: das Problem tritt nur auf, wenn man eine Auflösung nutzt, bei der der Footer der Startseite OHNE SCROLLEN zu sehen ist. (deshalb hatte ich das mit der Footersichtbarkeit erwähnt).

Ich habe jetzt mal Folgendes probiert - ich habe die Inhalte der (überlangen) Impressum-Seite so gekürzt, dass sie nicht mehr überlang ist - das heißt, dass der Footer ohne scrollen zu sehen ist. JETZT tritt das Problem auf der Seite nicht mehr auf. Es scheint also im Zusammenhang mit der Footer-Einblendung (oder der Größe von "main"?) zu stehen.
 
Werbung:
Es scheint, als würde die feste Höhe des headers das Problem sein (aktuell "height: 500px").

Wenn ich die Höhenangabe in Prozent angebe oder statt "height" hier "min-height" eintrage, funktioniert es!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben