Adapter le footer aux mobiles

Bonjour,

J'ai modifié mon message initial de façon à ce qu'il soit beaucoup plus facile à comprendre et moins long.

Merci d'avance pour votre aide.

Salut,
Passe ton footer en position relative, ça devrait fonctionner.

Bonsoir,

Le problème c'est qu'en position relative le footer se met sous le menu:

J'ai testé via firefox et la vue adaptative je n'ai pas vue de problème.

https://imgur.com/a/3Yhj0

Pourquoi ne pas utiliser de framework css? Un petit bootstrap? https://getbootstrap.com/

Oui sur l'image on ne voit pas de problème, mais si là on scroll on se rend compte que le footer reste où il est. Il est en faite au bas de l'écran (et non de la page) lorsqu'on charge la page la première fois, puis y reste.

Je viens de tester sur mon smartphone, j'ai pas de problème, même quand je scroll, le footer reste en bas de l'écran et non en bas de page. Idem sur firefox avec vue adaptative.

Sur quel support tu fais ton test?

Je test sous Firefox avec la vue adaptative pour simuler un téléphone. En faite actuellement dans le CSS, le footer est en position fixed, il reste au bas de l'écran qu'importe comment on scroll.

Mais j'aimerais que sur mobile il reste au bas de la page, et non de l'écran.

Or, que je le met en absolute ou relative, il ne va pas au bas de la page.

Si on le met en position absolute on remarque, via l'inspecteur, que le body et le html ont la hauteur de la partie de la page visible au chargement de la page, et que le footer est collé en bas, au lieu d'être collé au bas de la page. Et tout le reste du contenu de la page, visible si on scroll, sort du html et body.

Cela se voit très bien ici:

Peut être que ce problème n'est pas lié au footer, vu qu'il se place au bas du body et html comme il se doit, mais plutôt que c'est lié au body et au html lui même, qui n'englobent pas tout le contenu de la page, mais seulement la partie visible au chargement de la page.

je vais essayer de t'expliquer ton problème, tu dois réecrire ton layout!! header, main, footer et il faut définir ton main(apportera l'ensemble du contenu de la page), avec un 'min-height: 987px' comme ça ton footer restera toujours en bas, pense aussi a laisse dans l'ordre les elements.

voici un petit exemple:
https://codepen.io/brunorafaeI/pen/XVzZZy

Je pense que ce sont les includes de fichiers dans le html qui perturbent tout. Ils sont inclus au bas de la page tous ensemble et après il y a je ne sais quoi qui les positionne, au lieu de les mettre sur la page dans leur ordre d'affichage ...

Je voulais tester cette façon de faire que j'avais vu sur un forum anglais mais rien ne vaut les bonnes vieilles méthodes pour ne pas tout mélanger.

Je vous remercie d'avoir jeté un coup d'oeil.