Problematische Seite

[MrMurphy1]

Hallo

wenn du mal schauen magst

Das scheint zu funktionieren.

main sollte auch display flex bekommen, um auf diesem Weg einen Sticky Footer

Kann es sein das noch Reste deiner Versuche im CSS herumgeistern?

Du hast leider einige CSS-Lösungen gewählt, die ich selbst nicht bevorzuge.

Du benötigst keinen Sticky Footer, sondern einen Footer, der unten im main-Container herumgeistert. Das ist ein kleiner aber feiner Unterschied.

Ich würde dafür folgende Lösung vorschlagen:

1. Lösche in der all.css folgende Einträge oder kommentiere sie wie in dem Beispiel aus:

@media only screen and (min-width: 55.0em) {                              /*large-Screen*/
...
main > article {
 /*-webkit-flex: auto;*/
 /*flex: auto;*/
 /*-webkit-order: 2;*/
 /*order: 2;*/
 }
main > header {
 /*-webkit-flex: none;*/
 /*flex: none;*/
 /*-webkit-order: 1;*/
 /*order: 1;*/
 }
main > footer {
 /*-webkit-flex: none;*/
 /*flex: none;*/
 /*-webkit-order: 3;*/
 /*order: 3;*/
 }
...
}

Das sollte an allen Webseiten erst mal nichts ändern.

2. Füge dann folgende Angaben in der all.css hinzu:

@media only screen and (min-width: 55.0em) {                              /*large-Screen*/
...
main {
   display: flex;
   flex: 1 1 1%;
   flex-direction: column;
}
main>footer {
   margin-top: auto;
}
...
}

Das ganze dann ausgiebig testen.

Gruss

MrMurphy