[HTML - CSS] Fixer le footer en bas de page

patrice86 Messages postés 1380 Date d'inscription Statut Membre Dernière intervention -
jo - 2 sept. 2016 à 15:36

Bonjour,

Je suis entrain de développer un EPortFolio en HTLM5 et CSS3.
Jusque là tout va bien sauf que je me prend la tête sur un problème qui pourtant semble tout bête, je n'arrive pas à fixer le pied de page (footer) en bas de la page.
Comme beaucoup de personnes qui ont ce soucis, il vient automatiquement se mettre à la suite du texte, donc si il n'y en a pas beaucoup, il se colle en plein milieu de la page...

J'ai beau avoir effectué des recherches sur internet et essayé plusieurs solutions, impossible de le faire.

Une solution svp ?
Voici l'adresse provisoire de mon site.
https://www.sfr.fr/fermeture-des-pages-perso.html

Merci =)

A voir également:

Mettre le footer en bas de page css
Footer bas de page - Meilleures réponses
Footer fixé en bas de page - Meilleures réponses
Impossible de supprimer une page word - Guide
Mettre google en page d'accueil - Guide
Mettre une page en paysage word - Guide
Numéro de page word - Guide
Traduire une page en français - Guide

1 réponse

Réponse 1 / 1

tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention 220

Salut,

Éventuellement une position fixe au footer ?
CSS:

#footer{
position:fixed;
bottom:0;
left:0;
height:100px;
background: black;
}

HTML:

<div id="footer"></div>

lionel-DIL Messages postés 1222 Date d'inscription Statut Membre Dernière intervention 1 768

Petite chose à ajouter : <footer> et non <div id="footer"> ;-)
Ne faut-il pas mettre un width: 100% aussi ?

tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention 220

Oui, j'ai oublié le "width:100%;" :).

Pourquoi <footer> et pas "<div id="footer"></div> " ?

Edit : je viens de comprendre .. HTML5

Steve

Si tu as utilisé des floats, tu n'as qu'a mettre
footer {float:none; clear:both; }

prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention 431

bien penser à mettre un display: block; au footer dans le cas de l'utilisation de la balise HTML5 (Important pour le support des vieux navigateurs)

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

En position fixe, le footer suivera le scroll et passera devant le texte si la page est trop grande.
Une autre solution ici : http://www.snoupix.com/coller-le-pied-de-page-en-bas_tutorial_9.html

Au passage, il est déconseillé d'affecter un width:100% sur un élément de type block, il prend déjà tout la largeur disponible et peut causer des problèmes si vous ajouter des bordures ou des marges internes.

Discussions similaires

tiret du bas

CHERCHE (_)

[référencement] Ne pas être référencé

Votre réponse

Discussions similaires