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 : 352
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