Discussion :

[romaintaz]

Bonjour les gens,

Je cherche à placer un DIV en bas d'une page, et qu'il y reste toujours, y compris quand l'utilisateur scrolle.
J'ai lu la FAQ, et j'ai trouvé ce code CSS qui marche très bien, mais pour un DIV en haut de page :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.enHaut {
	position : fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	/* Bidouille pour IE */ 
	position: expression("absolute");
	width : expression("100%");
	top: expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight);
	left: expression("0px");
}

Je me suis dit bêtement qu'il fallait changer les attributs top par bottom, et modifier légèrement la valeur de l'expression utilisant scrollTop.
Malheureusement, je n'arrive pas à avoir ce que je veux. Au mieux, mon div se positionne bien en bas de ma page, mais ne suit pas le mouvement quand l'utilisateur scrolle vers le bas.

Quelle modification du CSS dois-je apporter pour faire ce que je veux ?

Je précise que cela doit marcher pour IE, et dans des versions antérieures à la 7.

Merci.

En passant, j'ai aussi remarqué qu'il faut vraiment utiliser le this.offsetHeight - this.offsetHeight qui vaut 0, sinon ça ne marche pas, comme aussi remarqué ici. Quelqu'un a une explication à cette bizarrerie ?

[romaintaz]

Bon, j'ai trouvé une solution, mais je ne la trouve pas très élégante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
.fixedFooter {
    position : fixed; /* This is needed for other browsers than IE */
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    position : expression("absolute");
    width : expression("100%");
    top: expression(document.body.clientHeight - 20 + document.body.scrollTop + this.offsetHeight - this.offsetHeight); /* J'ai mis -20 parce que mon DIV fait 20 pixels de haut. */
    left : expression("0px");
}

Donc si quelqu'un a une solution, je suis prenneur...

[cadoudal56]

Hello,

Bon je te donnes cela au Pif, mais est ce que ceci ne fonctionnerais pas ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.enHaut {
	position : fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	/* Bidouille pour IE */ 
	position: expression("absolute");
	width : expression("100%");
	bottom: expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight);
	left: expression("0px");
}

A voir aussi si il ne faut pas changer document.body.scrollTop en document.body.scrollBottom

@+
cadou

[romaintaz]

Merci pour ta réponse, mais cela ne fonctionne pas (pour tes 2 propositions) : le DIV est en haut de la page (normal, il a un "top: 0" qui reste) et qui reste en haut de la page (et non pas en haut de l'écran).

Donc pour l'instant, je reste sur ma méthode qui marche, à défaut d'être belle...