18007 sujets

Questions générales et questions de débutants

[Résolu] Bas conteneur déroulant reste caché derriére le Footer dans I

Bonjour,
Je suis en train de faire mon premier site et il y a un problème que je n'arrive pas à résoudre. Ma page contient un menu sur la gauche, un conteneur et un footer fixe. La hauteur de mon conteneur est supérieur à la hauteur d'un écran et donc défilent avec la souris ou avec la barre de défilement et la fin du conteneur est visible en passant au-dessus du footer.
Ceci fonctionne bien dans tout les navigateur, sauf dans IE11. Le défilement s'arrête sur le bas de l'écran et donc le bas du conteneur
reste caché derrière le footer qui est fixe.
Je vous joint 2 captures d'écran (IE11 et Chrome) pour visualiser.
Est-ce que quelqu'un pourrait m'expliquer le non fonctionnement dans IE?
Merci pour vos réponses.
upload/1488561547-64467-captureie11.jpg
upload/1488561583-64467-capturechrome.jpg
Bonsoir,

Il faut savoir que tout les navigateurs n'interprètent pas tout de la même manière.

Vérifie au niveau de tes margins s'il en manque pour agrandir l'espace de scroll car Chrome l'ajoute peut-être par défaut sur une div ou autre.

Avec IE Il faut souvent bidouiller un peu en te disant : "tiens et si j'ajoute 100px margin-bottom à ce bloc, que ce passe t'il ? Cela pourrait-il agrandir l'espace de scroll ? "

De nez comme ça moi j'ajouterais 60px de margin-bottom à ton bloc central (celui sur fond transparent blanc) ce qui laisserait plus d'espace au scroll.

Le problème peut aussi venir d'une correction automatique. Certains navigateurs tel que chrome corrige beaucoup de chose pour le développeur pour éviter de casser le site ex :

Chrome : "Il manque une fermeture de div, pas grave on l'a referme nous même"

Sauf que le problème c'est que tout les navigateurs ne corrigent pas les erreurs de la même manière.

Mes conseils dans l'ordre sont donc :

- 1/ Bricole un peu pour voir ce qu'il se passe, si le problème pourrait être réglé facilement en prenant en compte les marges ou autres erreurs de conception, sinon :
- 2/ Vérifie ton code que tu n'as pas de grosse erreur sémantique grace au validateur w3c https://validator.w3.org/ sinon :
- 3/ Vérifie également que le CSS n'a pas de soucis majeur : https://jigsaw.w3.org/css-validator/

Si cela provient d'erreur interprété il faut que tu prennes l'habitude de tester ton code ou d'avoir un environnement de travail qui le fait pour toi car malheureusement ce qui fonctionne chez un navigateur ne fonctionnera pas forcément sur un autre.

Sinon, de manière plus poussée, quand tu utiliseras des technos plus puissantes par la suite tu as une bonne adresse pour vérifier les compatibilités de chaque navigateurs : http://caniuse.com/

J'espère que tu arriveras à solutionner ton problème !

Bonne journée Smiley smile
Modifié par kevinlourenco (04 Mar 2017 - 07:17)
Bonjour,
Et merci pour votre réponse.
J'ai fait les vérifs avec les différents lien indiqués et je n'ai pas de soucis de syntaxes.
J'ai par contre trouvé un solution:
La partie centrale est un #conteneur dans lequel se trouve un #main.
J'ai supprimé le margin-bottom du main, et j'ai mis un padding-bottom sur le conteneur d'une hauteur égale à celle du footer + 10px.
Avec ceci le scroll fait dépasser le main du footer et dans tout les navigateurs. Le conteneur par contre reste caché derriére le footer, mais il n'est pas visible à l'écran puisque vide.
Merci encore et bonne journée
Sujet clos
Aller à