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
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<!-- cache-control avec max-age=60 pour le développement uniquement -->
<meta http-equiv="cache-control" content="public, max-age=60">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="author" content="Daniel Hagnoul">
<title>test</title>
<style>
*,
*:after,
*:before {
box-sizing: border-box;
}
/* CSS du test */
div {
padding: 0.3rem;
border: 1pt dotted grey;
}
/* Fin CSS du test */
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
<script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
<script>
'use strict';
document.addEventListener( "DOMContentLoaded", ev => {
// le DOM est construit, la page web n'est pas visible
moment.locale( "fr" );
klog( `DOM ready : ${ new kDvjhDate() }` );
// code du test
// fin code du test
}, false );
window.addEventListener( "load", ev => {
// le DOM est construit et la page web est visible
klog( `Window load : ${ new kDvjhDate() }` );
// code du test
const
elemHauteur = document.querySelector( "div.hauteur" ),
elemEnfant = document.querySelector( "div.enfant" );
// debug, console, touche F12
// https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/offsetHeight
console.log( elemHauteur.offsetHeight, elemEnfant.offsetHeight ); // 133 81
setTimeout( () => {
elemEnfant.style.minHeight = elemHauteur.offsetHeight + "px";
// debug, console, touche F12
console.log( elemHauteur.offsetHeight, elemEnfant.offsetHeight ); // 133 133
}, 3000 ); // 3s pour voir la différence
// fin code du test
kIDUnique();
}, false );
</script>
</head>
<body>
<main>
<div class="container">
<div>
<div class="hauteur">
<p>Advenit post multos Scudilo Scutariorum tribunus velamento subagrestis ingenii persuasionis opifex callidus.
qui eum adulabili sermone seriis admixto solus omnium proficisci pellexit vultu adsimulato saepius replicando quod
flagrantibus votis eum videre frater cuperet patruelis, siquid per inprudentiam gestum est remissurus ut mitis et
clemens, participemque eum suae maiestatis adscisceret, futurum laborum quoque socium, quos Arctoae provinciae diu
fessae poscebant.</p>
<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat
intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina exultans ut in tuto
iam locata mariti salute muneratam vehiculoque inpositam per regiae ianuas emisit in publicum, ut his inlecebris
alios quoque ad indicanda proliceret paria vel maiora.</p>
</div>
<div class="parent">
<div class="enfant">
<p>Nisi mihi Phaedrum, inquam, tu mentitum aut Zenonem putas, quorum utrumque audivi, cum mihi nihil sane praeter
sedulitatem probarent, omnes mihi Epicuri sententiae satis notae sunt. atque eos, quos nominavi, cum Attico nostro
frequenter audivi, cum miraretur ille quidem utrumque, Phaedrum autem etiam amaret, cotidieque inter nos ea, quae
audiebamus, conferebamus, neque erat umquam controversia, quid ego intellegerem, sed quid probarem.</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html> |
Récupérer la hauteur d'une div pour l'appliquer à une autre div
Répondre avec citation
Partager