Remplir automatiquement l'espace libre sur un div

qwertz1 · 19/08/2011, 13h34

Salut à tous,

je viens solliciter votre aide car je souhaiterais que mon div "D" dans lequel ce trouve un textarea puissent (les 2) automatique prendre l'espace libre qui leur reste jusqu'à la fin du div "A".

Comment faire?

Merci d'avance pour vos info!

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
#A {
	background-color: #FCF;
	height: 200px;
	width: 400px;
}
#B {
	background-color: #0CF;
	height: 30px;
	width: 200px;
}
#C {
	background-color: #0CC;
	height: 30px;
	width: 400px;
}
#D {
	height: 80px;
	background-color: #CF9;
}
</style>
</head>

<body>
<div id="A">
  <div id="B"></div>
  <div id="C"></div>
  <div id="D"><textarea name="text" style=""></textarea></div>
</div>
</body>

ludojojo · 19/08/2011, 15h26

Bonjour,

Et si tu ajoutes à ton "D" et à ton textearea la propriété :

Code :

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

width:100%;

Ou 99% pour des questions de présentation...

DjSteph · 19/08/2011, 15h38

Ta DIV A est fixe à 400px, alors que tes 2 DIV enfants B et C ont à eux seules 600px. D'avance il y a quelque chose à corriger, mais aussi, comme dit qwertz1, mets ta DIV A et D à width:100%.

qwertz1 · 19/08/2011, 17h26

Citation:

Envoyé par DjSteph

Ta DIV A est fixe à 400px, alors que tes 2 DIV enfants B et C ont à eux seules 600px. D'avance il y a quelque chose à corriger, mais aussi, comme dit qwertz1, mets ta DIV A et D à width:100%.

Non y a rien à corriger "A" fait 400px de longueur. "B" fait 200px et "C" la même longueur que "A".

jreaux62 · 19/08/2011, 18h26

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
	<style type="text/css">
#A {
	background-color: #FCF;
	height: 200px;
	width: 400px;
}
#B {
	background-color: #0CF;
	height: 30px;
	width: 200px;
}
#C {
	background-color: #0CC;
	height: 30px;
	width: 100%;
}
#D {
	height: 100%;
	width: 100%;
	background-color: #CF9;
}
#idtextarea {
	height: 100%;
	width: 100%;
}
	</style>

Code :

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

1
2
3
4
5
<div id="A">
  <div id="B">bbbbb</div>
  <div id="C">ccccc</div>
  <div id="D"><textarea id="idtextarea" name="text" style="">dddd</textarea></div>
</div>

Là, div "D" et textarea remplissent l'espace restant. Par contre, les dimensions restent fixes (fixée par div "A" à 400px x 200px).

qwertz1 · 20/08/2011, 10h10

Merci à tous pour votre aide!

Sinon jreaux62, ta méthode fonctionne parfaitement, le seul problème c'est que ça reste fixe! Mon problème c'est que je vais avoir un div caché entre "B" et "C" et qu'avec ta méthode, lorsque ce dernier apparaît, comme ta solution est fixe, le contenu de "C" et du textarea dépasse!

jreaux62 · 20/08/2011, 11h37

A vrai dire, c'est toi qui a fixé la taille de "A" ! -> height: 200px;

Teste avec ton div supplémentaire, ca devrait le faire !

"D" et le textarea ont : height: 100%;
=> ils vont s'adapter à la hauteur restante.

jreaux62 · 20/08/2011, 12h42

Voici une méthode en jquery pour adapter les hauteurs :
-> div "DD" s'adapte en hauteur quand div "EE" est masquée/affichée.

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
	<!-- Scripts Google : initialisation jquery -->
    <script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script type="text/javascript">
	$(function() {
		// divs a taille fixe :
		var A = $('#AA').height(); 	// hauteur du div "AA" (en px)
		var B = $('#BB').height(); 	// hauteur du div "BB" (en px)
		var C = $('#CC').height(); 	// hauteur du div "CC" (en px)
		// divs a taille variable :
		var D = A - (B + C);
		$('#DD').height(D); 		// on affecte la valeur D à la hauteur du div "DD" (en px)
		// on cache div EE au depart
		$('#EE').hide();		// div "EE" caché
		var E = 0;
 
		$('#afficher').click(function() {
			// afficher div EE
			$('#EE').show();	// div "EE" montré
			// on recalcule hauteur de DD
			E = $('#EE').height();	// hauteur du div "EE" (en px)
			D = A - (B + C + E);
			$('#DD').height(D); 	// on affecte la valeur D à la hauteur du div "DD" (en px)
		});
 
		$('#masquer').click(function() {
			// masquer div EE
			$('#EE').hide();	// div "EE" caché
			// on recalcule hauteur de DD
			D = A - (B + C);
			$('#DD').height(D);	// on affecte la valeur D à la hauteur du div "DD"
		});
	});
	</script>
 
	<style type="text/css">
#AA {
	background-color: #FCF;
	height: 200px;
	width: 400px;
}
#BB {
	background-color: #0CF;
	height: 30px;
	width: 200px;
}
#CC {
	background-color: #0CC;
	height: 30px;
	width: 100%;
}
#DD {
	height: 100%;
	width: 100%;
	background-color: #CF9;
}
#idtextarea {
	height: 100%;
	width: 100%;
}
#EE {
	background-color: yellow;
}
	</style>

Code html :

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

1
2
3
4
5
6
7
8
9
<p id="afficher">afficher le div caché</p>
<p id="masquer">masquer le div caché</p>
 
<div id="AA">
  <div id="BB">bbbbbbbbbb</div>
  <div id="EE">j'étais caché<br />dans mon nez !</div>
  <div id="CC">ccccc</div>
  <div id="DD"><textarea id="idtextarea" name="text" style="">dddd</textarea></div>
</div>

Testé IE 8, firefox 3.6, safari 5.1

qwertz1 · 20/08/2011, 13h28

Bin non ça ne joue pas!

Sans le div caché c'est ok, sa donne ça:

http://data.imagup.com/12/1128505113.jpg

Et avec un div supplémentaire entre "B" et "C" sa donne ça:

http://data.imagup.com/10/1128505149.jpg

En gros si j'ajoute ce div caché, au lieu de préserver la taille original du div "A" ce dernier va s'allonger de la hauteur du div caché.

jreaux62 · 20/08/2011, 13h58

Si tu donnais ton code ?
Qu'on voit où est l'erreur ...

Au fait, dans mon code, c'est "EE" qui est cachée. Pas "DD".

OU alors ... : si ta div "caché" est trop grande (si sa hauteur est supérieure à l'espace disponible) , c'est normal que ca ne marche pas :
tu as fixé la hauteur totale de "A"

-> Peut-être devrais-tu préciser exactement ce qui est censé s'adapter, et ce qui doit rester fixe.

qwertz1 · 20/08/2011, 14h27

Oui pardon en faite je parlais du code suivant:

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
	<style type="text/css">
#A {
	background-color: #FCF;
	height: 200px;
	width: 400px;
}
#B {
	background-color: #0CF;
	height: 30px;
	width: 200px;
}
#C {
	background-color: #0CC;
	height: 30px;
	width: 100%;
}
#D {
	height: 100%;
	width: 100%;
	background-color: #CF9;
}
#idtextarea {
	height: 100%;
	width: 100%;
}
	</style>

Code :

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

1
2
3
4
5
6
<div id="A">
  <div id="B">bbbbb</div>
  <div id="C">ccccc</div>
  <div id="D"><textarea id="idtextarea" name="text" style="">dddd</textarea></div>
</div>

En gros, je voudrais le résultat du code si dessus, mais que même si j'ajoute un div supplémentaire entre "B" et "C", que mon div "A" conserve sa taille d'origine et donc par conséquent que mon div "D" et mon textarea soit donc diminué automatiquement de la taille du div supplémentaire dernièrement ajouté.

jreaux62 · 20/08/2011, 14h43

C'est exactement ce que fait ce code.

Bien sûr, il faut l'adapter ...

fab256 · 20/08/2011, 23h56

Une solution en Javascript, on pourrait calculer la hauteur du div D par rapport a son positionnement TOP et par rapport a la hauteur du div A (parent).

Code :

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

1
2
dd=document.getElementById("D");
dd.style.height=dd.offsetParent.offsetHeight-dd.offsetTop;

Biensur si on ajouter un div E entre B et C il faudrait refaire l'appel de cette fonction pour recalculer la hauteur du div D.

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
<HTML>
<HEAD>
<style type="text/css">
#A {
position: absolute; 
background-color: #FCF;
height: 200px;
width: 400px;
display : block;
}
#D {
background: #0CF;
width:100%;
}
#B {
	background-color: yellow;
	height: 30px;
	width: 200px;
}
#C {
	background-color: #0CC;
	height: 30px;
	width: 100%;
}
#E {
        display:none;
        background-color: #BCC;
	height: 30px;
	width: 100%;
}	
#idtextarea {
	height: 100%;
	width: 100%;
}	
</style>

<script>
function AdapterDiv(NomDiv){
         dd=document.getElementById(NomDiv);
         dd.style.height=dd.offsetParent.offsetHeight-dd.offsetTop;
}
</script>

</HEAD>
<body onload="AdapterDiv('D')">
<a href="#" onclick="document.getElementById('E').style.display='block'; AdapterDiv('D');">[ Afficher div E ]</a>
<a href="#" onclick="document.getElementById('E').style.display='none'; AdapterDiv('D');">[ Cacher div E ]</a>
<br/>
<div id="A">
  <div id="B">bbbbb</div>
  <div id="E">eeeee</div>
  <div id="C">ccccc</div>
  <div id="D"><textarea ID="idtextarea" name="text">dddd</textarea></div>
</div>
</body>
</HTML>

19/08/2011, 15h26	#2
ludojojo Membre Expert Ludovic Solczynski Développeur .NET Inscription : avril 2008 Messages : 1 446 Détails du profil Informations personnelles : Nom : Ludovic Solczynski Localisation : France Informations professionnelles : Activité : Développeur .NET Secteur : Administration - Collectivité locale Informations forums : Inscription : avril 2008 Messages : 1 446 Points : 2 179 Points : 2 179	Bonjour, Et si tu ajoutes à ton "D" et à ton textearea la propriété : Code : Sélectionner tout - Visualiser dans une fenêtre à part width:100%; Ou 99% pour des questions de présentation... __________________ Aide les autres... Et les autres t'aideront.... Mon site DVP Mon site perso N'oubliez pas de voter pour les messages dont la réponse est pertinente
	10

20/08/2011, 11h37	#7
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	A vrai dire, c'est toi qui a fixé la taille de "A" ! -> height: 200px; Teste avec ton div supplémentaire, ca devrait le faire ! "D" et le textarea ont : height: 100%; => ils vont s'adapter à la hauteur restante. __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

20/08/2011, 13h58	#10
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Si tu donnais ton code ? Qu'on voit où est l'erreur ... Au fait, dans mon code, c'est "EE" qui est cachée. Pas "DD". OU alors ... : si ta div "caché" est trop grande (si sa hauteur est supérieure à l'espace disponible) , c'est normal que ca ne marche pas : tu as fixé la hauteur totale de "A" -> Peut-être devrais-tu préciser exactement ce qui est censé s'adapter, et ce qui doit rester fixe. __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

20/08/2011, 14h43	#12
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	C'est exactement ce que fait ce code. Bien sûr, il faut l'adapter ... __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

19/08/2011, 15h38	#3
DjSteph Nouveau Membre du Club Stéphane Demers Consultant E-Business Inscription : juin 2009 Messages : 60 Détails du profil Informations personnelles : Nom : Stéphane Demers Localisation : Canada Informations professionnelles : Activité : Consultant E-Business Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : juin 2009 Messages : 60 Points : 38 Points : 38	Ta DIV A est fixe à 400px, alors que tes 2 DIV enfants B et C ont à eux seules 600px. D'avance il y a quelque chose à corriger, mais aussi, comme dit qwertz1, mets ta DIV A et D à width:100%.
	00

20/08/2011, 10h10	#6
qwertz1 Invité de passage Inscription : novembre 2010 Messages : 45 Détails du profil Informations forums : Inscription : novembre 2010 Messages : 45 Points : 0 Points : 0	Merci à tous pour votre aide! Sinon jreaux62, ta méthode fonctionne parfaitement, le seul problème c'est que ça reste fixe! Mon problème c'est que je vais avoir un div caché entre "B" et "C" et qu'avec ta méthode, lorsque ce dernier apparaît, comme ta solution est fixe, le contenu de "C" et du textarea dépasse!
	00

20/08/2011, 13h28	#9
qwertz1 Invité de passage Inscription : novembre 2010 Messages : 45 Détails du profil Informations forums : Inscription : novembre 2010 Messages : 45 Points : 0 Points : 0	Bin non ça ne joue pas! Sans le div caché c'est ok, sa donne ça: http://data.imagup.com/12/1128505113.jpg Et avec un div supplémentaire entre "B" et "C" sa donne ça: http://data.imagup.com/10/1128505149.jpg En gros si j'ajoute ce div caché, au lieu de préserver la taille original du div "A" ce dernier va s'allonger de la hauteur du div caché.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email