[CSS] Etirer mon bloc pour qu'il fasse la hauteur de la page

**FraktaL** · 09/01/2006, 13h37

bonjour à tous,

voila j'ai un bloc div qui est mon conteneur principal. il se trouve au centre de ma page. Actuellement il se dimentionne en hauteur en fonction de son contenu. En largeur il a une taille fixe. J'aimerais bien qu'en hauteur il fasse toute la pagesi le contenu est plus petit et qu'il se redimentionne si le contenu est plus grand vous me suivez?

voici le code de mon conteneur:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
#container { 
width:640px;
height:100%;
margin-right:auto;
margin-left:auto;
margin-top:-15px;
padding-left:39px;
text-align:left;
background:url(../Images/Background.jpg) repeat-y;
}

Voici ce que j'aimerais avoir:

**efficks** · 09/01/2006, 15h09

Moi je n'ai rien trouver en CSS donc j'ai un javascript sur le OnLoad et sur le OnResize qui redimentionne le DIV.
Si quelqu'un a une solution plus clean elle est la bienvenue.

**SpaceFrog** · 09/01/2006, 16h15

bidouille, colle lui une image de 1px en largeur avec une hauteru de 100 % ?

**FraktaL** · 09/01/2006, 17h24

bidouille, colle lui une image de 1px en largeur avec une hauteru de 100 % ?

je viens d'essayer mais je ne comprends pas le principe. Je mets la balise <img src="monimage.jpg" height="100%"> dans mon conteneur mais rien ne se produit. à l'affichage c'est toujours pareil.

**efficks** · 09/01/2006, 21h26

C'est tout à fait normal, 100% sur la hauteur en IE ne représente pas la hauteur de la page. La hauteur de la page est de 0 à la base et s'adapte aux objets à l'intérieur.
Pour contourner le problème, tu devras faire comme j'avais dit, soit mettre ton contenu dans un DIV et au onLoad et onResize, appeler une fonction qui va redimentionner ton DIV à la heuteur désirée.

**Nesmontou** · 09/01/2006, 21h58

Salut, j'ai trouvé ç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
45
46
47
<html>
<head>
	<style type="text/css">
	body
	{
		text-align: center;
		margin: 0;
		height: 100%;
	}
 
	#container
	{
		margin: 0 auto;
		background-color: red;
		width: 400px;
		height: auto;
		min-height: 100%;
		_height: 100%;
	}
	</style>
</head>
<body>
	<div id="container">
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	texte<br />
	</div>
</body>
</html>

Fonctionne très bien sous IE 6.0 et FF 1.5

Par contre j'ai dû rajouté height: 100%; pour le body alors qu'aucun site ne l'indiquait et sinon, FF n'est pas content : bizarre

Bon développement ;-)