Discussion :

[G-First]

Bonjour,

Je poste ce sujet car je n'arrive pas à faire en sorte que la page que je suis en train de créer prenne automatiquement toute la hauteur de la page internet.

J'ai essayé pas mal de choses, mais malgré toutes les astuces trouvées, je n'arrive pas à faire en sorte que mon div prenne toute la hauteur restante de ma page. J'ai appliqué l'overflow mais tant que la balise height ne fonctionne pas comme il faut cela ne sert pas à grand chose

Voici mon code 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
54
55
56
57
58
59
60
61
#conteneur {
	position:absolute;
	background:url("images/img_courbes.gif") no-repeat right top;
	width:100% ;
        height:100% ;
	top:0px ;
	right:0px ;
	border:0px ;
	margin:0px ;
}
 
#haut {
	position:absolute;
	width:100% ;
        height:133px ;
	top:0px ;
	bottom:0px ;
	left:0px ;
	right:0px ;
	margin:0px ;
	border:0px ;
}
 
#entete {
	background:url("images/img_entete.png") no-repeat left;
	width:100% ;
        height:133px ;
	top:0px ;
	bottom:0px ;
	left:0px ;
	right:0px ;
	margin:0px ;
	border:0px ;
}
 
#contact {
	position:absolute;
	float:right ;
	background:url("images/img_contact.gif") no-repeat;
	width:65px ;
        height:65px ;
	top:28px ;
	right:28px ;
	border:0px ;
	margin:0px ;
}
 
#bas {
	position:absolute;
	float: left;
	background:url("images/img_colonne.png") no-repeat left top;
	width:100% ;
        height:auto !important;
	height:400px ;
	min-height:400px ;
	top:133px ;
	right:0px ;
	border:0px ;
	margin:0px ;
	overflow:hidden;
}

Comme vous pouvez le voir, j'ai une en-tête de 133px de hauteur, et dessous un espace que je souhaite amener jusqu'au pied de la page, avec une image de fond que je souhaiterais voir occuper tout cet espace, quitte à être coupée. Mais je n'y arrive pas. En tout cas chez moi, sur Mozilla et IE, ça ne fonctionne pas. J'ai essayé toutes astuces trouvées mais ça ne change pas beaucoup, je me dis que j'ai peut-être une faute ailleurs.

Voilà ce que ça donne :
http://www.c-graphik.fr/c-graphik/


Donc si quelqu'un pouvait m'aider, en me disant où j'ai fait une erreur, ce serait formidable. Merci d'avance.

[c_s_s]

Bonjour,

Pour commencer, dans le css, tu peux définir une hauteur de 100% pour le html et le body :

Code :

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

1
2
3
html, body {
	height:100%;
}

Ensuite, tu peux enlever les marges du body pour éviter les barres de défilement inutiles (quand il n'y a pas assez de contenu) :

Code :

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

1
2
3
body {
	margin:0;
}

Ensuite, pour #conteneur et #haut, ces quelques lignes devraient suffire :

Code :

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

1
2
3
4
5
6
7
8
9
10
#conteneur {	
	background:url("images/img_courbes.gif") no-repeat right top;	
	height:100% ;	
}
 
#haut {
	position:absolute;	
	height:133px;
	width:100%;
}

Tu n'es pas obligé de préciser l'unité quand la valeur est nulle : 0px --> 0

[G-First]

Merci c_s_s pour cet épurement qui n'était pas du luxe et les quelques astuces.
Pour autant, cela ne règle pas mon souci initial : le site ne prend toujours pas la hauteur entière de la page et la balise height:auto ne fonctionne pas ! D'ailleurs, quand je la laisse seule pour mon div #bas rien ne s'affiche ! Une solution? Une erreur de ma part?

[c_s_s]

Au temps pour moi, j'avais oublié de t'indiquer ce que j'ai modifié pour le bloc #bas :

Code :

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

1
2
3
4
5
6
#bas{	
	background:url(images/img_colonne.png) no-repeat left 133px;
	width:100%;
  	height:100%;		
	overflow:hidden;
}

En principe ça devrait fonctionner.

Sinon, je mettrai en ligne la page que j'ai modifiée à partir de la tienne.

[G-First]

Fabuleux ! Merci beaucoup !