R�cup�rer hauteur du conteneur contenant plusieurs �l�ments dimensionn�s

**Opal_m** · 16/08/2018, 10h46

Bonjour � tous,

Je bloque une nouvelle fois, j'essaye d'�tre un maximum autonome mais apr�s quelques longues heures de recherche je vous sollicite (solution de facilit� je vous l'accorde..)

Je vais tenter au mieux d'expliciter mes probl�matique :

- Comment r�cup�rer la hauteur de tous les blocs ( et donc de la page ), j'ai tent� de r�cup�rer la hauteur d'un bloc et de la multiplier par le nombre de ligne cependant il est impossible d'utiliser un op�rateur sur une dimension (120px + 120px = 120px120px) face � ce probl�me j'ai essay� de r�cup�rer la hauteur du conteneur cependant celui-ci me renvoie une valeur de 18px alors que dans la console il semble tr�s claire que celui-ci a une valeur exc�dant 6000px (nb de bloc * hauteur du bloc (la hauteur �tant �gale � environ 25% de la longueur de la page))
(Dans le but de faire un bandeau de la m�me hauteur)

- Ensuite j'ai un probl�me tiers, lors de l'initialisation du website j'ai donn� la m�me classe � tous mes blocs cependant selon les bloc la fonction me donne des hauteurs diff�rentes ... J'avoue que ma logique � atteint ses limites ici

Nom : CaptureBugHauteur.PNG
Affichages : 358
Taille : 10,4 Ko

Voici mon code (HTML/CSS/Java)

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
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
<!DOCTYPE HTML>
<html>
 
<head>
<meta charset="UFT-8">
<title>Liste d'accès aux différentes leçons !</title>
 
<link rel="stylesheet" href="css/styles.css" />
 
</head>
 
<body>
 
<div id="menu">
 
</div>
 
<div id="conteneur">
 
	<div class="ligne Intro" >
		<div class="bloc Intro">
		</div>
		<div class="slider Intro">
		</div>
	</div>
 
	<div class="ligne entete">
		<div class="bloc">
		</div>
		<div class="slider">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne entete">
		<div class="slider">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
</div>
</body>
 
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
 
</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
 
 
div{
	box-sizing: border-box; /* AJOUT pour prise en compte bordure dans width et height */
}
 
body{
	margin : 0px;
	display: flex;
}
 
#menu{
	position : fixed;
	width:6%;
	/* background-color: hsla(214, 27%, 65%); */
	background-color: black;
	border: 1px solid red;
	z-index:50;
}
 
#conteneur{
width: 94%;
border: 1px solid red;
margin-left: 6%;
background-color: hsla(0, 100%, 50%,0.2);
box-sizing: border-box; 
}
 
.ligne{
	width:100%;
	display: flex; /* AJOUT */
}
 
.bloc{
	position : relative;
	width: 25%;
	border : 1px solid green;
	background-color: hsla(35,13%,82%,1);
}
 
.slider{
	width:75%;
	border: 1px solid blue;
	background-color: hsla(250, 100%, 50%,0.2);
}
 
.Intro{
 
}

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
window.onload = function() {
	resize_blocs();
};
 
window.onresize =function()  {
	resize_blocs();
};
 
// déjà donné gracieusement par le forum 
function resize_blocs(){
	var blocs = document.querySelectorAll('.bloc');
	blocs.forEach( function(bloc){
		var style = window.getComputedStyle(bloc);
		bloc.style.height = style.width;
		console.log( bloc.style.height )
	});
 
}
 
 
 
// J'essaye ici de récupérer tant bien que mal la hauteur de l'ensemble de la page
// Ne pouvant pas récupérer la taille d'un bloc pour le multiplier à cause du "px"
// derrière j'ai essayé avec le conteneur qui semble bien être reconnu dans la fonction
// "inspecter" de chrome pourtant celui-ci me renvoie 18 surement la taille des borders
// cumulée
 
	var menu = document.getElementById('menu');
	console.log(menu);
	menu.style.height = '100px';
	menu.style.backgroundColor = "red";
	var conteneur = document.getElementById('conteneur');
	console.log(getComputedStyle(conteneur).height);
	menu.style.height = getComputedStyle(conteneur).height;

Je pensais m'en sortir tout seul mais je me suis un peu surestim� il semblerait...

Je vous remercie pour votre temps !! H�te d'avoir vos recommandations

Invit� · 16/08/2018, 12h34

Bonjour,

1- ARR�TE de confondre Java et JavaScript : ce sont 2 langages diff�rents !

2- il faut r�cup�rer cette hauteur APRES le redimensionnement des blocs :

Code JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
function resize_blocs(){
	var blocs = document.querySelectorAll('.bloc');
	blocs.forEach( function(bloc){
		var style = window.getComputedStyle(bloc);
		bloc.style.height = style.width;
//		console.log( bloc.style.height )
	});
	affiche_height_total();
}
function affiche_height_total(){
	  console.log('body : '+getComputedStyle(document.querySelector('body')).height);
	  console.log('conteneur : '+getComputedStyle(document.querySelector('#conteneur')).height);
}

**Opal_m** · 16/08/2018, 15h38

Merci j'aurais pu m'en douter, je n'etais pas sur avoir besoin de d�clarer la variable si elle �tait d�j� existante dans la console !
Une id�e pour multiplier des longueurs en px et d'o� proviens le bug des box de hauteur diff�rentes ?

Bonne journ�e � toi

Je ferais attention entre java et javascript desol� je suis pas du tout du milieu haha

**Beginner.** · 16/08/2018, 16h46

Salut,

Je n'ai pas tout suivi mais pour la question de multiplication si j'ai bien compris c'est la dimension (px) qui te pose probl�me eh bien utilise la fonction parseInt()...

Par exemple parseInt("31px", 10) renvoie 31...

R�cup�rer hauteur du conteneur contenant plusieurs �l�ments dimensionn�s

JavaScript

Vue hybride

Discussions similaires

Partager

Partager