Utiliser toute hauteur disponible

**sabotage** · 17/02/2010, 10h40

Bonjour,

Je m'enerve sur un CSS.
Je voudrais que ma page remplisse toujours toute la hauteur avec en particulier une image de fond présente du bas header, jusqu'en bas de la page.

Le plus prés que j'ai reussi à obtenir donne ça :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html,body {
	height: 100%;
}
 
div#page {
	margin: 0 auto;
	width: 1000px;
        border: 1px solid green;
        height: 100%;
}
 
div#header {
	border: 1px solid blue;
	height: 183px;
}
 
div#corps {
	background-image: url(design/fond.gif);
	background-repeat: repeat-y;
	background-color: blue;
	height: 100%;
}
 
 
div#footer {
	background-image: url(design/fond.gif);
	background-repeat: repeat-y;
	background-color: red;
	height: 40px;
	}
</style>
</head>
<body>
<div id="page">
	<div id="header"></div>
	<div id="corps"></div>
	<div id="footer"></div>
</div>
</body>
</html>

Ma #page prend bien toute la hauteur du navigateur mais mon #corps prends la même dimension (au lieu de prendre tout l'espace disponible) tout en commencant après le header, ce qui fait qu'il dépasse de la page.

Le fond ne doit pas être présent sur #header, ce qui m'empeche de le mettre plus simplement sur #page.

Est-ce que j'ai tout faux dans mon approche ou est-ce qu'on peut corriger ?

Merci.

**boboss123** · 17/02/2010, 11h30

Salut,

tu ne pourras pas faire exactement ce que tu veux (me semble t-il)...

Voici une solution qui s'en rapproche:

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
54
55
56
57
58
59
60
61
62
63
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div{
	margin:0;
	padding:0;
}
 
html,body {
	height: 100%;
 
	margin:0;
	padding:0;
}
 
div#page {
	position: relative;
	margin: 0 auto;
	width: 1000px;
    height: 100%;
 
	border-left: 4px solid grey;
	border-right: 4px solid grey;
	background-color: purple;
}
 
 
div#header {
	border-top: 4px solid grey;
	height: 183px;
	background-color: red;
}
 
div#corps {
	background-image: url(design/fond.gif);
	background-repeat: repeat-y;
	background-color: blue;
	height: 300px;
}
 
 
div#footer {
	position: absolute;
	bottom:0;
	left:0;
	background-color: green;
	height: 40px;
	width: 100%;
	border-bottom: 4px solid grey;
	}
 
</style>
</head>
<body>
	<div id="page">
		<div id="header">header</div>
		<div id="corps">mon texte</div>
		<div id="footer">footer</div>
	</div>
</body>
</html>

border-top/right/bottom/left n'ont pas l'air de fonctionner sous IE<8 mais on est obligé de faire comme ça car sinon on dépasse la taille des 100%
=> attention, si la fenetre est trop petite, le footer sera au dessu des autres éléments (il faut définir un min-height)

Une autre solution consisterait a definir la hauteur de tous tes elements en %

**Macmillenium** · 17/02/2010, 13h06

Il y a une solution dans la FAQ

http://css.developpez.com/faq/?page=...ooter_bas_page

**sabotage** · 17/02/2010, 13h09

La solution de la faq ne repond pas à mon problème : il ne s'agit pas d'avoir le footer en bas mais d'etirer le corps jusqu'au footer.
Si je défini le footer comme dans la faq, il se met en bas de la fenetre du navigateur mais mon #corps continue a aller encore plus bas.

Pour la proposition de boboss123, malheureusement le corps ne prends pas non plus toute la hauteur.

**Macmillenium** · 17/02/2010, 13h23

Mets min-height au lieu de height.

**sabotage** · 17/02/2010, 14h26

Ca donne la même chose.
Il prend 100% de la taille de son conteneur, donc la taille de la page mais sous le header.

Utiliser toute hauteur disponible

Dimensionnement en CSS

Discussions similaires

Partager

Partager