[Div] Hauteur qui varie avec firefox

**manaboko** · 08/02/2007, 10h53

voici mon code css pour un div qui doit suivre la hauteur de son contenu

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
 
#content {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	min-height:570px;/*pour firefox, si le contenu est plus long que la hauteur de l'écran*/
	width:100%;
	height:auto;
	background-color:#EEF3F6;
}
 
/*redefinir pour IE*/
*html #content {
	width:100%;
	height:100%;
}

et le html est simple

Code html :

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

1
2
3
4
5
<html>
<body>
<div id="content">aazazzaazazzazaza</div>
</body>
</html>

Mais le bug, c'est que sous Firefox, la hauteur reste à 570px pour un contenu très long, est-ce que quelqu'un pourrait m'aider?

Merci

**mr32** · 11/02/2007, 09h55

Bonjour,

La solution semble être la suivante non ?

Code :

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

1
2
3
4
5
6
7
8
9
#content {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	min-height:570px;/*pour firefox, si le contenu est plus long que la hauteur de l'écran*/
	width:100%;
	height:100%;
	background-color:#EEF3F6;
}

**manaboko** · 12/02/2007, 10h59

non, cela ne marche pas chez moi

**mr32** · 12/02/2007, 12h03

Sur mon Firefox 2.0 (Mac OSX), ça passe nickel pourtant...

**manaboko** · 19/02/2007, 10h10

le mien ne marche pas parce que le div content contient un div à onglets et je ne sais pas comment y remedier.Voici ma page:

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
 
<!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>Document sans nom</title>
    <link href="onglets.css" rel="stylesheet" type="text/css" />
	<style type="text/css">	
		#content {
				position:relative; 
				margin-left:auto; 
				margin-right:auto; 
				min-height:570px;/*pour firefox, si le contenu est plus long que la hauteur de l'écran*/  
				width:100%; 
				height:100%; 
				background-color:#EEF3F6; 
			}
		</style>
</head>
 
<body> 
	<div id="content">
		begin
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<div>
			<div>div ici</div>
		</div>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
 
		<div id="onglet">
			<div id="menu">
				<a href="#" id="_0" class="current" onclick="multiClass(this.id)" alt="menu0" name="#">Champs généraux</a>
				<a href="#" id="_1" class="ghost" onclick="multiClass(this.id)" alt="menu1">Compositions du capital/Participations</a>
				<a href="#" id="_2" class="ghost" onclick="multiClass(this.id)" alt="menu2"><h6>Dirigeants</h6></a>
				<a href="#" id="_3" class="ghost" onclick="multiClass(this.id)" alt="menu3"><h6>Banques</h6></a>
			</div>
			<div id="menu_0"  class="on content">
				<table>
					<tr><td>Nature du correspondant</td><td><input name="nat_corr_2" size="81"/></td></tr>
					<tr><td>Nom</td><td><input name="nom_2" size="81"/></td></tr>
					<tr><td>Prénom</td><td><input name="prenom_2" size="81"/></td></tr>
					<tr><td>Téléphone</td><td><input name="tel_2" size="81"/></td></tr>
					<tr><td>Télécopie</td><td><input name="telecopie_2" size="81" /></td></tr>
					<tr><td>E-mail</td><td><input name="email_2" size="81" /></td></tr>
				</table>
			</div>
			<div id="menu_1"  class="off content">
				<table>
					<tr><td>Nature du correspondant</td><td><input name="nat_corr_3" size="81"/></td></tr>
					<tr><td>Nom</td><td><input name="nom_3" size="81"/></td></tr>
					<tr><td>Prénom</td><td><input name="prenom_3" size="81"/></td></tr>
					<tr><td>Téléphone</td><td><input name="tel_3" size="81"/></td></tr>
					<tr><td>Télécopie</td><td><input name="telecopie_3" size="81" /></td></tr>
					<tr><td>E-mail</td><td><input name="email_3" size="81" /></td></tr>
				</table>
			</div>
			<div id="menu_2"  class="off content">
				<table>
					<tr><td>Nature du correspondant</td><td><input name="nat_corr_2" size="81"/></td></tr>
					<tr><td>Nom</td><td><input name="nom_2" size="81"/></td></tr>
					<tr><td>Prénom</td><td><input name="prenom_2 "size="81"/></td></tr>
					<tr><td>Téléphone</td><td><input name="tel_2" size="81"/></td></tr>
					<tr><td>Télécopie</td><td><input name="telecopie_2" size="81" /></td></tr>
					<tr><td>E-mail</td><td><input name="email_2" size="81" /></td></tr>
				</table>
			</div>
			<div id="menu_3"  class="off content">
				<table>
					<tr><td>Nature du correspondant</td><td><input name="nat_corr_3" size="81"/></td></tr>
					<tr><td>Nom</td><td><input name="nom_3" size="81"/></td></tr>
					<tr><td>Prénom</td><td><input name="prenom_3" size="81"/></td></tr>
					<tr><td>Téléphone</td><td><input name="tel_3" size="81"/></td></tr>
					<tr><td>Télécopie</td><td><input name="telecopie_3" size="81" /></td></tr>
					<tr><td>E-mail</td><td><input name="email_3" size="81" /></td></tr>
				</table>
			</div>
		</div>
	</div>
</body> 
</html>

et voici onglets.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
#onglet {
	border: 0px solid gray;
	margin-left: 5px;
	margin-top:45px;
	width:98%;
}
 
#onglet a {
	text-align: center;
	display: block;
	min-width: 90px;
	width:auto;
	height: 20px;
	line-height: 20px;
	text-decoration: none;
	float: left;
	margin-left:5px;
	padding:0px;
	font-size:10px;
}
 
#onglet h6 {
	width:90px;
	padding:0px;
	margin:0px;
	font-size:10px;
}
 
#onglet a:link, #onglet a:visited, #onglet a:hover {
	text-decoration: none;
}
 
#onglet a.current {
	border-right: 1px solid gray;
	border-top:1px solid gray;
	border-bottom: 0px solid gray;
	border-left:1px solid gray;
	color:#006699;
}
 
#onglet a.ghost  {
	border-right: 1px solid gray;
	border-top:1px solid gray;
	border-bottom: 1px solid gray;
	border-left:1px solid gray;
	background-color: #CBD4F9;
	color:#006699;
}
 
#onglet .on {
	display: block;
	float:left;
	width:100%;
}
 
#onglet .off {
	display: none;
}
 
#onglet .content {/*le contenu du bloc*/
	margin-top:0px;
	margin-left:0px;
	border-right: 1px solid gray;
	border-top:1px solid #CCCCCC;
	border-bottom: 1px solid gray;
	border-left:1px solid gray;
}
 
#menu {
	margin-top:5px;
}
 
#onglet div table {
	margin-left:5px;
	margin-top:5px;
}

quelqu'un pourrait m'aider?merci

[Div] Hauteur qui varie avec firefox

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager