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

aruhuno

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].

Jos

Bonjour,

Si j'ai bien compris essay ceci :

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

A tester, je ne suis pas sure que çà fonctionne.

aruhuno

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 !

Jos

Tu veux qu'il soit en permanance en bas?

Stéphane

Bonjour aruhuno

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

aruhuno

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 Wham

Essaie avec ce script peut-être ? (nécessite jquery).
Ou une solution en css voir ici et là

aruhuno

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 Wham

Essaie avec ça :

/* Footer : bloquer en bas */
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: -32px auto -28px;
	padding-top:32px;
}

je-evrard

et ça http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page ?

aruhuno

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 Wham

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).

aruhuno

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 !