Fußzeile bleibt nicht unten
1 
Bertie
0 Hans Baumann
0
0 Felix Riesterer
0 0 Bertie
0
Fußzeile bleibt nicht unten
Gunnar Bittersmann
Rolf BHallo,
ich wollte das Beispiel hier in Codepen zeigen. Dort aber tritt der Effekt nicht auf.
Bei breitem Screen bleibt die Fußzeile am unteren Rand. Wenn ich den Screen nach und nach verschmälere, wandert die Fußzeile nach oben, wenn man nach unten scrollt. Wie kann man dies vermeiden?
Hier (leider) der Sourcecode:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test sticky</title>
<style>
body {
margin: 0;
}
footer {
position: sticky;
background-color: lightblue;
bottom:0;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx</td></tr>
</tbody>
</table>
<footer>
<div>Datenschutzhinweise Impressum</div>
</footer>
</body>
</html>
-
Salü Roland
Auf dem Mac sehe ich beim Testen Deines Codes kein Problem in Safari + Firefox + Chrome. In welcher Umgebung wandert denn der Footer bei Dir nach oben?
Gruss, Bertie
-
Hallo, ich hab sogar auf Linux den Firefox und auf Windows den Firefox und Edge getestet. Ich hatte kein Problem sehen können.
Wo taucht das auf?
-
Unter Windows 11, im Firefox
und
auf dem Android-Handy.
-
-
Lieber Roland,
in Deinem Beispiel verwendest Du eine einspaltige Tabelle. Das klingt ganz so, als würdest Du diese zum Layouten verwenden und nicht dafür, tabellarische Daten anzuzeigen. Desweiteren verwendest Du in Deinem Footer ein div-Element für reinen Fließtext. Auch das sieht nicht nach semantischem HTML aus.
Deswegen vermute ich, dass der von Dir gezeigte Code zu stark vereinfacht ist und das Problem selbst nicht enhtält.
Liebe Grüße
Felix Riesterer
-
Ja, es ist stark vereinfacht, um den Effekt zu zeigen bei möglichst wenig Coding.
Der Effekt triit aber auch bei diesem Beispiel auf, siehe Bilder, oben.
-
Salü Roland
Ach so, bis auf 196 Pixel Breite runter hatte ich nicht getestet.
Firefox hat auf dem Mac dasselbe Problem, Chrome und Safari nicht (Bildschirmfoto von Safari). Scheint ein Firefox Bug zu sein.
Gruss, Bertie
-
Salü Roland
In den Entwicklertools von Firefox Mac verschwindet der Bug ab einer Breite von ca. 280 Pixeln. Bei einer kurzen Suche finde ich bis 10 Jahre zurück Beiträge welche schreiben, man solle für die kleinsten Smartphones mit einer Breite von 320 Pixeln planen.
Also rechnen die Entwickler von Mozilla vielleicht inzwischen nicht mehr mit schmaleren Bildschirmen als 320 und haben drum den Fehler nicht gesehen.
Willst Du so kleine Handys wirklich berücksichtigen?
Gruss, Bertie
-
Salü Roland
In den Entwicklertools von Firefox Mac verschwindet der Bug ab einer Breite von ca. 280 Pixeln. Bei einer kurzen Suche finde ich bis 10 Jahre zurück Beiträge welche schreiben, man solle für die kleinsten Smartphones mit einer Breite von 320 Pixeln planen.
Das hat mich überzeugt. Ich werde also zukünftig mit 320px als Mindestbreite testen.
Thanks @ all !
Kommando zurück!
Wenn ich meine Originalanwendung (aus der ich das Beispiel erzeugte) mit 320px teste, habe ich den gleichen Effekt. Er beginnt da schon bei etwa 569px.
Ich werde versuchen, die Ursache des gewaltigen Unterschieds herauszufinden.
-
@@Bertie
Bei einer kurzen Suche finde ich bis 10 Jahre zurück Beiträge welche schreiben, man solle für die kleinsten Smartphones mit einer Breite von 320 Pixeln planen.
Smart watches?
Willst Du so kleine Handys wirklich berücksichtigen?
Willst Du Smart watches wirklich nicht berücksichtigen?
🖖 Live long and prosper
--
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14-
Salü Gunnar und Roland
Bei niedrigen Viewports will ich normalerweise nicht, dass der knappe Platz von sticky footer (und allenfalls sticky header) dauernd besetzt wird.
Deshalb benutze ich dafür jeweils eine media query, für dieses Beispiel sähe das etwa so aus:
footer { background-color: lightblue; } @media screen and (min-height: 600px) { footer { position: sticky; bottom: 0; } }Damit wären Smartphones im Querformat und Smartwatches ausgeschlossen.
Gruss, Bertie
-
Hallo Gunnar,
ich denke auch, dass Smartwatches eine ganz eigene Bedienphilosophie haben und Webseiten auf solchen Viewports ein darauf ausgelegtes UI brauchen.
Und ich habe bisher nicht versucht, auf diesem Guckloch einen Browser zu nutzen.
Rolf
--
sumpsi - posui - obstruxi
-
-
-
@@alle:
Kann man solch einen Effekt der Firefox-Entwickergruppe mitteilen, und wenn ja, wie?
-
sollte hierüber gehen:
https://bugzilla.mozilla.org/enter_bug.cgi?product=DevTools&component=General
-
sollte hierüber gehen:
https://bugzilla.mozilla.org/enter_bug.cgi?product=DevTools&component=General
Eine einzige Katatrophe, diese Seite: Man wird aufgefordert, eine Frage an die Community zu stellen, und es kommt sofort die Antwort, dass zu dieser kein Beitrag vorliegt. Ich will ja aber die Frage erst ins Forum stellen!
-
-
-
-
-
-
Hallo,
wann es genau auftritt weiß ich jetzt.
Die Fußzeile bleibt nicht mehr fest, wenn der Screen so schmal wird, dass unten ein horizontaler Scrollbalken erscheint.
Da dieser Scrollbalken fast nicht sichtbar ist, ist es mir und vielleicht auch Euch nicht aufgefallen.Hat jetzt jemand eine Idee, wie man dies vermeiden kann?
(Ein Scrollen in der Tabelle nach rechts kann nicht vermieden werden, da eine andere Darstellung unverständlich wird)
