Discussion :

[Benduroy]

Bonjour, voici un problème mainte fois demandé sur les Internet et pourtant je ne trouve pas la solution qui fonctionne chez moi.

J'ai un site avec une architecture basique semblable à ceci:



J'aimerais que mon footer soit en bas de page même si mon content ne fait que 100 ou 200 px de hauteur.

Actuellement j'ai appliqué la solution suivante:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#pied {
		position: absolute;
		bottom: 0;
	}

et cela fonctionne bien pour les page où j'ai un petit contenu. Je dirais même que ça fonctionne sur les pages avec un contenu qui dépasse l'écran de notre device... jusqu'à ce que l'on scrolle l'écran et bien sûr notre pied de page se barre.

[Invité]

Bonjour,

• FAQ CSS : Comment positionner un footer en bas de page ?

[gazza]

La FAQ CSS propose :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#footer {
  position : absolute;
  width : 100%; /* obligatoire si la largeur du footer n'est pas spécifiée explicitement dans le code CSS */
  height : 6em;
  bottom : 0; /* positionner le footer en bas */
  left : 0; /* positionner le footer à gauche */
  background : red;
}

Toutefois, le footer reste complètement statique, même si l'utilisateur "déroule" la page. Pour y remédier, je mets la propriété "position" à "fixed".

[Benduroy]

Et oui donc je suis bien d'accord. Donc la FAQ ne solutionne pas du tout mon problème. Après il n'existe peut être aucune solution pour ce que je veux faire mais je voulais en être sûr.

[Invité]

@gazza
Tu as dû oublier une partie du code, car la solution fonctionne (testé sur Firefox, Opera, I.E. 11) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
html, body {
  margin : 0;
  padding : 0;
  height : 100%;
}
 
#wrapper {
  position : relative; /* référent du footer */
  min-height : 100%;
  background : green;
}
 
#container {
  padding-bottom : 6em; /* = hauteur du footer */
}
#container > div {
  padding : 2em;
}
 
 
#footer {
  position : absolute;
  width : 100%; /* obligatoire si la largeur du footer n'est pas spécifiée explicitement dans le code CSS */
  height : 6em;
  bottom : 0; /* positionner le footer en bas */
  left : 0; /* positionner le footer à gauche */
  background : red;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="wrapper">
  <div id="container">
 
    <div>   
Et quoniam inedia gravi adflictabantur, locum petivere Paleas nomine, vergentem in mare, valido muro firmatum, ubi conduntur nunc usque commeatus distribui militibus omne latus Isauriae defendentibus adsueti. circumstetere igitur hoc munimentum per triduum et trinoctium et cum neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis quicquam geri posset, nec procederet ullum obsidionale commentum, maesti excedunt postrema vi subigente maiora viribus adgressuri.<br /><br />
 
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.<br /><br />
 
Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.<br /><br />
 
Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.<br /><br />
 
Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat.
    </div>
 
  </div>
  <div id="footer">
    Footer en bas de page.
  </div>
</div>

[NoSmoking]

Bonjour,

Après il n'existe peut être aucune solution pour ce que je veux faire mais je voulais en être sûr.

manque peux être une précision, que doit-on faire si le contenu prend plus de place que ne peut en contenir la fenêtre.

Quoiqu'il en soit les solutions apportées sont fonctionnelles.

Je rajoutes un lien vers cette discussion : http://www.developpez.net/forums/d12...e-navigateurs/ (voir post #5)

[Benduroy]

manque peux être une précision, que doit-on faire si le contenu prend plus de place que ne peut en contenir la fenêtre.

Il faut qu'un ascenseur apparaissent et que le footer se retrouve toujours en bas. Ce cas là est celui qui fonctionne sur mes pages.

[Invité]

Tu as dû oublier une partie du code, car la solution fonctionne (testé sur Firefox, Opera, I.E. 11)

Je ne vois pas ce que tu espères de plus...

[Benduroy]

Ok il me manquait la partie avec le wrapper, j'avais pas vu.
Merci!