Placer un div en bas de page ou de fenêtre

**jd_HotK** · 14/11/2011, 00h08

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 ?

**Emyleen** · 14/11/2011, 17h16

Le bloc conteneur d'un bloc en position absolu doit être en position relative. Essaye de mettre position:relative; dans ton .informations_horizontal.
Personnellement je n'utilise pas les position:fixed; je vais aller me renseigner.

**jd_HotK** · 14/11/2011, 22h03

Merci pour la réponse ! Malheureusement, je viens d'essayer et ce n'est pas ce que je souhaite faire.

En ayant remplacé "position : fixed" par "position : relative" dans le style de ".informations_horizontal, .informations_vertical", j'ai toujours la signature juste après le texte dans les pages dont la hauteur n'excède pas celle de la fenêtre. Quant aux pages plus hautes que la fenêtre, la zone information recouvre le menu quand je descends l'ascenseur vertical.

Placer un div en bas de page ou de fenêtre

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager