Hauteur Non Connu

**romain_ci** · 17/06/2008, 17h43

Salut a tous !

Je fait un site en Xhtml CSS qui doit etre extensible en hauteur, selon la quantité d'info biensur

!

Mon HTML est comme ceci (Pour faire simple) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<body>
 
<div id="c_conteneur">
 
     <div id="c_gauche"></div>
 
     <div id="c_droite"></div>
 
</div>
 
</body>

voici le 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
 
#c_conteneur {
   position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: 820px;
 
 
}
 
#c_gauche {
          float:left;
          width:220px;
          min-height:100%;
          height:100%;
          background-color:#ccc;
}
 
#c_droite{
    width:196px;
    float:left;
    min-height:100%;
    height:100%;
    background-color:#777;
}

voila c'est un truc assez basic... Deux colonnes en faite !
Et la c'est le Drame

Impossible de recup le height... il est inconnu...

Jsuis autant un noob que ca ?

Merci a tous d'avance

**Erwan31** · 17/06/2008, 20h09

Bonsoir,
pour que le height:100% fonctionne, il doit se référer à une hauteur initiale de 100% qui n'est en l'occurrence pas spécifiée.
Tu dois donc ajouter

Code :

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

html, body {height:100%}

**romain_ci** · 18/06/2008, 09h28

bonjour !

ca ca marche pas ! car le height 100% sur le Body et html va se bolquer à la taille de la fenetre. Si j'ai un scroll et bien c'est mort

et un min-height ?! Non n'y pencer pas ! j'ai deja essayer

**romain_ci** · 18/06/2008, 09h44

c'est bon j'ai trouver une solution pa de souci !! mai vu que mon cas est un pas particulier en vrai !
je vai pa l'expliquer...

Mais en gros j'ai mis un ptit table avec deux colonnes et un background-color sur celui de gauche et de droite !!

Bidouille bidouille quand tu nous tien !

Merci encore !

**Er3van** · 18/06/2008, 09h55

Je ne sais pas trop ce que tu veux du coup, extensible en hauteur sans scroll ?
Normalement ce code devrait être ce que tu veux :

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
64
65
<!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" xml:lang="fr">
 
	<head>
		<title>iWebmaster » Annonces de recrutement gratuites pour webmasters.</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<link href="design.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			body, html {
				height : 100% ;
				margin : 0px ;
				padding : 0px ;
			}
			#c_conteneur {
				position: relative;
			    margin-left: auto;
			    margin-right: auto;
			    margin-top: 0;
			    margin-bottom: 0;
			    width: 820px;
				height : 100% ;
				background-color : #AA5555 ;
 
			}
 
			#c_gauche {
				position : absolute ;
				top : 0px ;
				left : 0px ;
			    width : 220px;
			    min-height : 100%;
			    height : auto !important ;
				height : 100% ;
			    background-color : #55AAAA ;
			}
 
			#c_droite{
				position : absolute ;
				top : 0px ;
				right : 0px ;
			    width : 196px;
			    min-height : 100%;
			    height : auto !important ;
				height : 100% ;
			    background-color : #5555FF ;
			}
 
		</style>
	</head>
 
	<body>
 
 
		<div id="c_conteneur">
		 Conteneur
		     <div id="c_gauche">Gauche</div>
 
		     <div id="c_droite">Droite</div>
		 Conteneur
 
		</div>
 
	<body>
 
</html>

EDIT : Fais comme tu l'entends, mais les tableaux ne sont pas fait pour ça, ça engendre des soucis d'accessibilité notamment...

**romain_ci** · 18/06/2008, 09h59

Hey bien en faite non !
J'ai que deux colonnes et non trois !
Puis ca prend direct la hauteur max de la fenetre si on met un

Code :

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

html, body:100%

**Er3van** · 18/06/2008, 10h20

Tu n'as que trois lignes de code à changer...
Mais tu n'auras un contenu adaptable qu'à la seule taille du contenu !
Généralement ce n'est pas ce qui est souhaité, mais si c'est ce que tu veux pourquoi pas...

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
<!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" xml:lang="fr">
 
	<head>
		<title>iWebmaster » Annonces de recrutement gratuites pour webmasters.</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<link href="design.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			body, html {				
				margin : 0px ;
				padding : 0px ;
			}
			#c_conteneur {
				position: relative;
			    margin-left: auto;
			    margin-right: auto;
			    margin-top: 0;
			    margin-bottom: 0;
			    width: 820px;
				background-color : #AA5555 ;
 
			}
 
			#c_gauche {
				position : absolute ;
				top : 0px ;
				left : 0px ;
			    width : 410px;
			    height : auto ;
			    background-color : #55AAAA ;
			}
 
			#c_droite{
				position : absolute ;
				top : 0px ;
				right : 0px ;
			    width : 410px;
			    height : auto
			    background-color : #5555FF ;
			}
 
		</style>
	</head>
 
	<body>
 
 
		<div id="c_conteneur">
		 Conteneur
		     <div id="c_gauche">Gauche</div>
 
		     <div id="c_droite">Droite</div>
		 Conteneur
 
		</div>
 
	<body>
 
</html>

Hauteur Non Connu

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager