[Résolu] Bloquer le footer en bas de page

aruhunoaruhuno Member
septembre 2013 modifié dans Entraide
Bonjour à tous !

Après de nombreuses recherches sur internet, je n'ai pas trouvé de solution à ce que je cherche à faire.
Mon but est de bloquer le footer en bas de page de cette façon là :
[list=*]
[*]si le contenu de la page est trop petit, alors le footer est en bas de la fenêtre du navigateur[/*]
[*]si le contenu est plus grand que la taille de la fenêtre du navigateur, alors le footer est en bas du contenu[/*]
[/list]

Mon site actuellement en dev : http://dev.egarim.fr/

Merci d'avance pour ceux qui se pencheront sur mon cas [del]désespéré[/del].

Réponses

  • JosJos Member
    septembre 2013 modifié
    Bonjour,

    Si j'ai bien compris essay ceci :

    #footer {
    bottom: 0;
    position: absolute;
    width: 100%;
    }

    A tester, je ne suis pas sure que çà fonctionne.
  • aruhunoaruhuno Member
    septembre 2013 modifié
    Salut Jos,

    Merci, c'est presque ça, mais j'avais déjà essayé et comme tu peux le voir sur ma page d'accueil, ça ne va pas en bas du contenu quand le contenu est plus grand que la fenêtre du navigateur.

    PS : lors de ma recherche, je n'ai peut être pas saisie les bons mots clefs ou ce que je veux n'existe peut être pas... merci en tout cas de m'aider !
  • JosJos Member
    Tu veux qu'il soit en permanance en bas?
  • StéphaneStéphane Member, Former PluXml Project Manager
    Bonjour aruhuno

    tu trouveras peut être ton bonheur ici
    http://limpid.nl/lab/css/fixed/

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • aruhunoaruhuno Member
    septembre 2013 modifié
    Salut Stéphane,

    Non, toujours pas, je réexplique (désolé d'être si peu clair) :
    [list=*]
    [*]contenu plus haut que la fenêtre : footer en bas du contenu[/*]
    [*]contenu plus petit que la fenêtre : footer en bas de la fenêtre[/*]
    [/list]

    J'espère être un peu plus clair ><
  • Jerry WhamJerry Wham Member
    Essaie avec ce script peut-être ? (nécessite jquery).
    Ou une solution en css voir ici et là
  • aruhunoaruhuno Member
    Jerry Wham a écrit:
    Essaie avec ce script peut-être ? (nécessite jquery).
    Ou une solution en css voir ici et là
    Mouarf, pas loin du tout, merci !!!
    J'ai juste un soucis, un scroll apparait dans le cas où mon contenu est plus petit que la fenêtre.

    Exemple : http://dev.egarim.fr/telechargements
  • Jerry WhamJerry Wham Member
    Essaie avec ça : 
    /* Footer : bloquer en bas */
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: -32px auto -28px;
	padding-top:32px;
}
  • je-evrardje-evrard Member
    et ça http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page ?
  • aruhunoaruhuno Member
    Jerry Wham a écrit:
    Essaie avec ça : 
    /* Footer : bloquer en bas */
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: -32px auto -28px;
	padding-top:32px;
}
    Je ne sais pas trop comment tu as trouvé ces valeurs, mais ça marche au poil =]

    Un très grand MERCI !
    je-evrard a écrit:
    et ça http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page ?
    Je garde le lien sous le coude si besoin, mais j'ai pris celle de Jerry Wham =]

    Merci en tout cas de ton aide.

    D'ailleurs, merci à vous tous !
  • Jerry WhamJerry Wham Member
    Pour les valeurs, tu as deux blocs : .push qui fait 16px de haut et #footer qui fait la même hauteur.

    16 + 16 = 32. J'ai donc relevé l'ensemble du wrapper de 32px (c'est la première valeur du margin).
    En faisant ça, tout le bloc est remonté et le bas de page était bien là où on le souhaitait. Mais l'entête était tronquée (il lui manquait les 32px). J'ai donc ajouté un padding-top pour combler ce manque (cela ajoute une marge qui modifie la hauteur du bloc).

    Il fallait donc à nouveau relever le bas. J'ai essayé 32px d'emblée, mais c'était trop important. Une marge apparaissait en dessous. Je l'ai mesurée et j'ai enlevé sa hauteur (4px) aux 32px :

    32 - 4 = 28

    Pour la gauche et la droite, je laisse le navigateur géré tout seul (c'est le auto).
  • aruhunoaruhuno Member
    Jerry Wham a écrit:
    Pour les valeurs, tu as deux blocs : .push qui fait 16px de haut et #footer qui fait la même hauteur.

    16 + 16 = 32. J'ai donc relevé l'ensemble du wrapper de 32px (c'est la première valeur du margin).
    En faisant ça, tout le bloc est remonté et le bas de page était bien là où on le souhaitait. Mais l'entête était tronquée (il lui manquait les 32px). J'ai donc ajouté un padding-top pour combler ce manque (cela ajoute une marge qui modifie la hauteur du bloc).

    Il fallait donc à nouveau relever le bas. J'ai essayé 32px d'emblée, mais c'était trop important. Une marge apparaissait en dessous. Je l'ai mesurée et j'ai enlevé sa hauteur (4px) aux 32px :

    32 - 4 = 28

    Pour la gauche et la droite, je laisse le navigateur géré tout seul (c'est le auto).
    Avec les explications en plus, c'est parfait !

    Je butais sur ton 32 et 28 seulement hein ^^
    Merci encore !
Connectez-vous ou Inscrivez-vous pour répondre.