Imbrication div et hauteur automatique

**Periah** · 04/11/2013, 14h02

Bonjour,

Je me trouve actuellement face à un problème de présentation que je n'ai réussi qu'à contourner grâce à javascript. Je suis sûr qu'il doit exister un moyen de le faire joliment en css mais je ne trouve pas donc je viens chercher de l'aide

Déjà, je vous pose la situation avec mon bout de code :

Code html :

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
<!DOCTYPE html>
<HTML style="width:100%; height:100%">
	<HEAD>
		<link rel='stylesheet' type='text/css' href='_css_div.css' />
	</HEAD>
 
	<BODY style="width:100%; height:100%; margin:0; padding: 0; ">
		<DIV id="d1" style="position:absolute; width:700px; height:500px; left:50px; top:50px ; background-color:lightgrey;">
			<DIV id="d2" class="posa w100"  style="width:100%; height:50px; top:0px; background-color:lightgreen;">
				Partie fixe, height en px.
			</DIV>
			<DIV id="d3" class="posa w100" style="height:50px; bottom:0px; background-color:lightgreen;">
				Partie fixe, height en px.
			</DIV>
			<DIV id="d4" class="posa w100" style="bottom:50px; top:50px; background-color:red;overflow:hidden">
				<DIV id="d5" class="posr w100" style="background-color:pink;">
					<P style="margin-top:0px">Partie s'adaptant à son contenu.</P>
					<FIELDSET>
						<LEGEND>Cadre 1</LEGEND>
						<INPUT type="text"><BR/>
						<INPUT type="text"><BR/>
						<INPUT type="text">
					</FIELDSET>
					<FIELDSET>
						<LEGEND>Cadre 2</LEGEND>
						<INPUT type="text"><BR/>
						<INPUT type="text"><BR/>
						<INPUT type="text">
					</FIELDSET>
				</DIV>
				<DIV id="d6" class="posr w100" style="background-color:yellow;overflow:hidden">
					<FIELDSET>
						<LEGEND>Cadre 3</LEGEND>
						<DIV id="d7" class="posr w100" style="background-color:yellow;overflow:auto">
							<TABLE>
							<TR><TD>c1</TD><TD>l1</TD></TR>
							<TR><TD>c2</TD><TD>l2</TD></TR>
							<TR><TD>c3</TD><TD>l3</TD></TR>
							<TR><TD>c4</TD><TD>l4</TD></TR>
							<TR><TD>c5</TD><TD>l5</TD></TR>
							<TR><TD>c6</TD><TD>l6</TD></TR>
							<TR><TD>c7</TD><TD>l7</TD></TR>
							<TR><TD>c8</TD><TD>l8</TD></TR>
							<TR><TD>c9</TD><TD>l9</TD></TR>
							<TR><TD>c10</TD><TD>l10</TD></TR>
							<TR><TD>c11</TD><TD>l11</TD></TR>
							<TR><TD>c12</TD><TD>l12</TD></TR>
							<TR><TD>c13</TD><TD>l13</TD></TR>
							<TR><TD>c14</TD><TD>l14</TD></TR>
							<TR><TD>c15</TD><TD>l15</TD></TR>
							</TABLE>
						</DIV>
					</FIELDSET>
				</DIV>
				<DIV id="d7" class="posr w100" style="background-color:blue">
					<P style="margin-top:0px">Partie s'adaptant à son contenu.</P>
					<FIELDSET>
						<LEGEND>Cadre 4</LEGEND>
						<INPUT type="text"><BR/>
						<INPUT type="text"><BR/>
						<INPUT type="text">
					</FIELDSET>
				</DIV>
			</DIV>
		</DIV>
	</BODY>
</HTML>

Code css :

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
*
{
	margin: 0;
	padding: 0;
}
HTML, BODY
{
	background-color: #dfe9f6;
	height: 100%;
	margin: 0px;
	padding: 0px;
}
.posa
{
	position: absolute;
}
.posr
{
	position: relative;
}
.w100
{
	width: 100%;
}

Ce que j'aimerais faire, c'est avoir une div d1 qui s'adapte en hauteur à son contenu en fonction la hauteur de la div d7 et ceci jusqu'à une certaine limite (600px).

Les div en vert clair ont une hauteur fixée (et impérativement en pixel). Les div rose et bleu ont une hauteur automatiquement de façon à n'afficher que leur contenu.

La div jaune est variable.

Mettons que la somme des hauteurs des différentes div fasse 480 pixel alors d1 fera 480px.

Mettons que la somme des hauteurs des différentes div fasse 650px et dépasse donc la hauteur limite, la div d7 a la hauteur maxi pour que l'ensemble fasse 600px et à un ascenseur pour faire défiler son contenu.

Est ce faisable en pur css?

Merci d'avance et s'il y a des questions, ne pas hésiter

**saymoneu** · 04/11/2013, 16h33

Bonjour,

Pour commencer, je vous conseille de mettre tous vos style dans la feuille de style, c'est compliqué de s'y retrouver sinon avec des styles dans le html et d'autres dans la feuille de style

.

Vous mettez beaucoup de div en absolute, or, les hauteurs de ces div ne seront pas prises en compte pour la hauteur totale de votre conteneur.

On peut bien sûr contourner le problème en javascript ou avec des padding, mais ce n'est pas très propre. Toutes ces divs doivent-elles forcément être en absolute?

Votre conteneur d1 ne doit pas avoir de hauteur fixe mais une hauteur maximale. Ici, comme les éléments qu'il contient sont TOUS en absolute (je parle des enfant directs) celui-ci aura une hauteur... de zero si on enlève sa hauteur fixe. Voyez-vous le problème?

**Periah** · 05/11/2013, 09h33

Merci de votre réponse.

Il n'y a aucun contrainte sur le positionnement si ce n'est que la div d1 doit être en absolute.

J'ai modifié le HTML et le css suivant vos remarques.

Code html :

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
<!DOCTYPE html>
<HTML style="width:100%; height:100%">
	<HEAD>
		<link rel='stylesheet' type='text/css' href='_css_div.css' />
	</HEAD>
 
	<BODY>
		<DIV id="d1">
			<DIV id="d2" class="posr w100">
				Partie fixe haute, height en px.
			</DIV>
			<DIV id="d4" class="posr w100">
				<DIV id="d5" class="posr w100">
					<P>Partie s'adaptant à son contenu.</P>
					<FIELDSET>
						<LEGEND>Cadre 1</LEGEND>
						<INPUT type="text"><BR/>
						<INPUT type="text"><BR/>
						<INPUT type="text">
					</FIELDSET>
					<FIELDSET>
						<LEGEND>Cadre 2</LEGEND>
						<INPUT type="text"><BR/>
						<INPUT type="text"><BR/>
						<INPUT type="text">
					</FIELDSET>
				</DIV>
				<DIV id="d6" class="posr w100" style="background-color:yellow;overflow:hidden">
					<FIELDSET>
						<LEGEND>Cadre 3</LEGEND>
						<DIV id="d7" class="posr w100" style="background-color:yellow;overflow:auto">
							<TABLE>
							<TR><TD>c1</TD><TD>l1</TD></TR>
							<TR><TD>c2</TD><TD>l2</TD></TR>
							<TR><TD>c3</TD><TD>l3</TD></TR>
							<TR><TD>c4</TD><TD>l4</TD></TR>
							<TR><TD>c5</TD><TD>l5</TD></TR>
							<TR><TD>c6</TD><TD>l6</TD></TR>
							<TR><TD>c7</TD><TD>l7</TD></TR>
							<TR><TD>c8</TD><TD>l8</TD></TR>
							<TR><TD>c9</TD><TD>l9</TD></TR>
							<TR><TD>c10</TD><TD>l10</TD></TR>
							<TR><TD>c11</TD><TD>l11</TD></TR>
							<TR><TD>c12</TD><TD>l12</TD></TR>
							<TR><TD>c13</TD><TD>l13</TD></TR>
							<TR><TD>c14</TD><TD>l14</TD></TR>
							<TR><TD>c15</TD><TD>l15</TD></TR>
							</TABLE>
						</DIV>
					</FIELDSET>
				</DIV>
				<DIV id="d8" class="posr w100" style="background-color:blue">
					<P>Partie s'adaptant à son contenu.</P>
					<FIELDSET>
						<LEGEND>Cadre 4</LEGEND>
						<INPUT type="text"><BR/>
						<INPUT type="text"><BR/>
						<INPUT type="text">
					</FIELDSET>
				</DIV>
			</DIV>
			<DIV id="d3" class="posr w100">
				Partie fixe base, height en px.
			</DIV>
		</DIV>
	</BODY>
</HTML>

Code css :

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
*
{
	margin: 0;
	padding: 0;
}
HTML, BODY
{
	background-color: #dfe9f6;
	height: 100%;
	margin: 0px;
	padding: 0px;
	width: 100%;
}
P
{
	margin-top: 0px;
}
.posa
{
	position: absolute;
}
.posr
{
	position: relative;
}
.w100
{
	width: 100%;
}
#d1
{
	background-color: lightgrey;
	left: 50px;
	max-height: 500px;
	position: absolute;
	top: 50px;
	width: 700px;
}
#d2
{
	background-color: lightgreen;
	height: 50px;
}
#d3
{
	background-color: lightgreen;
	bottom: 0px;
	height: 50px;
}
#d4
{
	background-color: red;
	overflow: hidden;
}
#d4
{
	background-color: pink;
}
#d6
{
	background-color: yellow;
	overflow: hidden;
}
#d7
{
	background-color: brown;
	overflow: auto;
}
#d8
{
	background-color: blue;
}

Avec le code ci-dessus, j'obtiens un affichage qui dépasse très largement la taille maximale de ma div alors que je souhaiterais que le résultat soit comme sur la pièce jointe.

**saymoneu** · 05/11/2013, 10h59

Ah oui d'accord... Je n'avais pas très bien compris

désolé.
Du coup cela me semble compliqué de faire ça en full CSS. Il faudra forcément je pense récupérer les hauteurs des 2 divs avec hauteurs adaptatives (d5 et d8).

Je ne vois pas trop comment faire sinon...

**Periah** · 05/11/2013, 11h27

Merci de vous être penché sur la question qui reste donc ouverte

Imbrication div et hauteur automatique

Dimensionnement en CSS

Discussions similaires

Partager

Partager