Bonjour,

j'ai commencé à réaliser un joli petit site Web, presque prêt à être mis en ligne. Une chose mineure que j'aimerais ajouter, c'est une signature en bas de page. Rien de plus facile, il suffit de mettre ladite signature juste avant </body>. Sauf que mes pages sont formées de div placées avec le style "position : fixed", si bien que ce que j'ajoute ensuite se retrouve en haut de la page.

Qu'à cela ne tienne, j'ai mis ma signature dans un <div> que je vais aussi placer à coups de style. J'ai donc ma page qui a cette tête :
Code : 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
 
<!DOCTYPE html>
<body>
	<div id="divMenu">
		<div class="menu_horizontal">
			<!-- contenu du menu -->
		</div>
	</div>
	<div id="divInformations">
		<div class="informations_horizontal">
			<!-- contenu du menu -->
			<div class="signature">
				<!-- signature -->
			</div>
		</div>
	</div>
</body>
et mon fichier style.css :
Code : 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
.menu_horizontal, .menu_vertical {
	position : fixed;
	top : 0px;
	left : 0px;
	display : block;
	text-align : center;
	font-size : 160%;
	vertical-align : middle;
	background-repeat : no-repeat;
	background-attachment : fixed;
}
 
.informations_horizontal, .informations_vertical {
	padding-left : 0.5em;
	padding-right : 0.5em;
	right : 0px;
	position : fixed;
	bottom : 0px;
	height : auto;
	display : block;
	overflow : auto;
	background-image : url("images/fond_samourai.jpg");
	background-repeat : no-repeat;
	background-attachment : scroll;
}
 
.menu_horizontal {
	background-image : url("images/kanji_horizontal_large_h_128_fond.jpg");
	background-position : center top;
}
 
.menu_horizontal, .tab_menu_horizontal {
	width : 100%;
}
 
.informations_horizontal {
	top : 128px;
	left : 0px;
	background-position : center top;
}
 
.signature {
	position : relative;
	right : 0px;
	bottom : 0px;
	font-family : Times serif;
	font-style : italic;
	font-size : 70%;
	text-align : right;
	padding-right : 0.4em;
	padding-bottom : 0.4em;
}
Avec "position : relative" dans la classe "signature", j'ai bien ma signature en bas de page sur une page dont la hauteur est supérieure à celle de la fenêtre.

Là où le bât blesse, c'est que je voudrais afficher la signature en bas de la fenêtre sur les pages dont la hauteur est inférieure à celle de la fenêtre. "position : static" donne le même résultat que "position : relative", ce qui me paraît normal.

"position : fixed" place bien la signature en bas de la fenêtre, mais si le contenu dépasse le bas de la fenêtre, la signature est superposée. Et "position : absolute" a le même comportement, sauf que la signature est décalée un peu vers la gauche quand la page contient un ascenseur, pour ne pas se superposer avec. Or, le W3C affirme, dans sa sagesse, que "position : absolute" place un élément par rapport à son "containing block". Il me semble que dans ce cas, le "containing block" devrait être ce fichu div dont la classe est "informations_horizontal".

(Et j'ai vérifié à l'aide de "background-color" que même sur une page dont le contenu n'est pas plus haut que la fenêtre, le div de classe "informations_horizontal" descend jusqu'en bas de la fenêtre.)

Ai-je mal compris la notion de "containing block" ? Serait-ce un bug Firefox, ce dont je doute parce que Safari a le même comportement ? En huit mots, pouvez-vous m'aider, s'il vous plaît ?