28172 sujets

CSS et mise en forme, CSS3

Placement footer relatif à la hauteur écran

Bonjour,

Je cherche à placer mon footer d'une hauteur de 80px sur chaque page tout en bas de la page. Ce qui fonctionne sur les pages d'une hauteur supérieure à la hauteur de mon écran. Mais si le contenu de la page est faible et que la hauteur de celle-ci en conséquence ne dépasse pas la hauteur de mon écran, le footer se place donc juste après mon main et ne vient pas coller le bas de l'écran comme je le désirerai. Y-a-t-il une solution qui me permettrait d'adapter cela à la hauteur de ma page?

J'espère que mon explication est assez claire mais si ça n'est pas le cas, n'hésitez pas à me le faire remarquer que je fasse un petit schéma montrant mieux cela

Merci d'avance pour votre aide.
Modifié par KzrData (19 Jan 2012 - 11:09)
salut,
un footer par définition ça doit être - naturellement - à la fin du contenu de la page.

sinon pour ce que tu veux faire, il y a plusieurs façons, avec ou sans javascript. ça dépend de ce que tu souhaites exactement.
des exemples vite fait (faut bien chercher) :
- avec : jquery-sticky-footer
- sans : fixed-footers-without-javascript

ça devrait te donner des pistes.
Modifié par o06 (19 Jan 2012 - 12:03)
J'ai réussi en imitant le troisième exemple du lien de o06 et en optant donc pour la solution sans javascript.
Reste plus qu'à voir cela pour ie6 mais bon... Cela reste vraiment secondaire.

J'ai du par contre chercher un petit moment pourquoi l’ascenseur apparaissait à chaque fois sur les pages à contenu inférieur à la hauteur de la fenêtre. Tout cela juste pour un border placé sur le contenu à hauteur de 100%.
J'ai aussi eu un problème avec le footer qui passait au dessus de mon contenant, que j'ai résolu peu élégamment par un padding-bottom sur celui-ci... Mais cela a au moins le mérite de marcher.

Merci beaucoup pour votre aide.
Intéressant, j'avais été confronté à cette problématique il y a quelques temps et je n'avais pas trouvé la solution en CSS. Je suis donc allé voir ça d'un peu plus près... Smiley fouille

Finalement tout tiens dans le "min-height: 100%" pour la hauteur du site, avec un correctif pour IE6 (mais aujourd'hui ça ne vaux plus vraiment le coup de s'embêter pour ce vieux navigateur...) et sans oublier la hauteur en 100% pour la balise <html> (pour la balise <body> c'est superflu il me semble).
Sujet clos
Aller à