Positionnement div xhtml strict 1.0

Version imprimable

Bonjour a tous,

j'ai un petit probleme, j'aimerai placer mon footer au pied de ma page et que le contenu1 et contenu2 prenne le reste de la hauteur de ma page..

merci de votre aide.....

voici le code :

Code:

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
html, body {
	height: 100%;
	margin: 0;
}
div#global {
	position: relative;
	width: 750px;
	height:100%;
	margin: auto;
	background-color:#3399FF;
}
div#header {
	position: relative;
	width: 750px;
	height: 150px;
	background-color:#339933;
}
div#menu {
	position: relative;
	float:left;
	height:80px;
	width: 750px;
	background-color: #ffff00;
}
div#corps {
	position: relative;
	float:left;
	height:auto;
	width: 750px;
  	background-color:#FF6633;
}
div#contenu1 {
	height:100%;
	float: left;
	width: 530px;
	background-color:#996600;
	}
div#contenu2 {
	float: right;
	width: 200px;
	background-color:#99FF33;
	}
div#footer {
	float:left;
	width: 750px;
	height: 30px;
	bottom:0px;
	background-color:#339933;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML strict 1.0 positionnement</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
	<div id="global">
		<div id="header">HEADER</div>
		<div id="menu">MENU</div>
		<div id="corps">
			<div id="contenu1">CONTENU 1</div>
			<div id="contenu2">CONTENU 2</div>
		</div>
		<div id="footer">FOOTER</div>
	</div>
</body>
</html>

05/02/2007, 00h09
spidermang

pour moi

Tu peux t'en sortir en utilisant du script:

body.scrollHeight - 30px (taille de ton footer)
05/02/2007, 13h23
climzerland

peux tu me faire une micro-demo...parce que la je vois pas.
merci
05/02/2007, 15h26
Emcy

c'est pas ça que tu voudrais faire ?
http://cjoint.com/?cfpybYWn1X

le footer se colle à la fin du corps

si tu veux que ta page fasse obligatoirement 100%, il me semble qu'il n'y a qu'une solution (sans utiliser de javascript) : mettre tout tes height en %

ex :
header = 10%
corps = 80%
footer = 10%

petit prob aussi car si je met mon header a 10% mon corps a 80% et mon footer a 10%, je ne peu plus donner une hauter fix a mon header(pour mettre une image par exemple)... en gros je veux juste que le corps qui enveloppe le conteur est une hauteur de 100% mais le prob c'est qu'il prend comme base la hauteur de ma page complete ( header+menu+contenu+footer)du coup ma page est beaucoup trop grande.
j'ai pensé a utiliser table-row et table-cell pour simuler un tableau mais le probleme c que ca marche pas sous IE....

Reprennons le prob depuis le debut....j'ai simplifié le tout.
alors, j'ai ca...(le tout en xhtml stict 1.0)
Code:

1 2 3 4 5 6 7 8 <body> <div id="global"> <div id="header">HEADER</div> <div id="menu">MENU</div> <div id="corps">CORPS</div> <div id="footer">FOOTER</div> </div> </body>
Global : en bleu
Header : en rouge
Menu : en jaune
Corps : en orange
footer : en vert

et je veux que mon CORPS (orange) s'étire pour remplir ma page.

voici le CSS :
Code:

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 html, body { height: 100%; margin: 0; } #global { width: 750px; margin: auto; height:100%; background-color:#3399FF; } #header { width: 750px; height: 150px; background-color:#CC0000; } #menu { height:80px; width: 750px; background-color: #ffff00; } #corps { width: 750px; background-color:#FF6633; } #footer { width: 750px; height: 30px; background-color:#339933; }
si quelqu'un trouve la solution pour que ca marche sous ie et firefox...le tout au norme xhtml stric 1.0 c'est vraiment magique...

merci de votre aide

05/02/2007, 16h28
Emcy

c'est bizarre de faire une page en fonction de la taille de l'ecran : tu n'auras jamais beaucoup de texte ? ... car si c'est le cas qu'est-ce qui te garantie que tout va rentrer sur un ecran (surtout sur les 15 pouces).

sinon, il te reste le javascript => tu recupères la place disponible dans ton navigateur et tu fixes la hauteur de tes di en fonction.. sachant que si l'utilisateur modifie la taille de la fenetre ou s'il rajoute/enleve des barres d'outils, ou s'il fait apparaitre des onglets, il faudra changer la taille de tes div
(je ne peux pas plus t'aider : je ne suis pas un specialiste de js)

sinon tu peux fixer la taille de tes div et dire que ton site est optimisé pour une résolution données
05/02/2007, 17h47
climzerland

j'ai oublié de préciser quelque chose..

Si le contenu (texte) de mon CORPS depasse la hauteur de la page alors j'aimerai que le corps s'étire....

j'ai vraiment l'impression que c impossible...

avec de simples tableaux no souci mais avec des div....

merci de ton aide

est-ce que ça te va ?
...le probleme est que le footer est en %...

Code:

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
html, body {
	height: 100%;
	margin: 0;
}
 
#global {
	width: 750px;
	margin: auto;
	height:90%;
	background-color:#3399FF;
}
 
 
#header {
	width: 750px;
	height: 150px;
	background-color:#CC0000;
}
 
#menu {
	height:80px;
	width: 750px;
	background-color: #ffff00;
}
#corps {
	width: 750px;
  	background-color:#FF6633;
}
#footer {
	height:10%;
	margin: auto;
	width: 750px;
	background-color:#339933;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML strict 1.0 positionnement</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="global">
		<div id="header">HEADER</div>
		<div id="menu">MENU</div>
		<div id="corps">CORPS</div>
 
	</div>
 
	<div id="footer">FOOTER</div>
</body>
</html>

07/02/2007, 16h31
climzerland

merci

c'est pas mal...

Je pense que je m'en sortirai avec tout ca

encore merci de ton aide...
07/02/2007, 16h52
Candygirl
En partant de l'exemple que tu as mis tu peux modifier les points suivants pour avoir le comportement que tu souhaites:

- appliquer un min-height de 100% à ton global au lieu de height, le height de 100% ne doit être pris en compte que pour IE 6 et moins (commentaires conditionnels ou hack), par exemple:
Code:

1 2 3 4 5 6 7 8 9 10 #global { width: 750px; margin: auto; min-height:100%; background-color:#3399FF; } * html #global { height:100%; }
- appliquer au footer des marges autos et un margin-top négatif égal à sa hauteur:
Code:

1 2 3 4 5 6 7 #footer { width: 750px; margin:0 auto; height: 30px; margin-top:-30px; background-color:#339933; }
- appliquer un padding au corps égal à la hauteur du footer, qu'il ne passe pas sous le footer:
Code:

1 2 3 4 5 #corps { width: 750px; background-color:#FF6633; padding-bottom:30px; }