1 pièce(s) jointe(s)
Récupérer hauteur du conteneur contenant plusieurs éléments dimensionnés
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 :aie:
Pièce jointe 404074
Voici mon code (HTML/CSS/Java)
Code:
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:
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:
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... :oops:
Je vous remercie pour votre temps !! Hâte d'avoir vos recommandations :)
