Hauteur d'une DIV en fonction d'une autre DIV via JavaScript

**friendofweb** · 02/09/2015, 10h30

Bonjour, je voudrais juste comprendre pourquoi un code Javascript proposé Ici fonctionne Ici, mais pas sur ma machine.

Voici, je que je peux constater via Firebug :

Nom : firebug2.jpg
Affichages : 176
Taille : 31,6 Ko

Nom : firebug2.jpg
Affichages : 176
Taille : 31,6 Ko

Nom : firebug.jpg
Affichages : 152
Taille : 24,8 Ko

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
 
<!DOCTYPE html>
<!-- norme html5 -->
<html lang="fr">
	<head>
		<meta http-equiv ="content-type" content="text/html; charset=UTF-8" />
		<title>Hauteur d'une div</title>
		<link rel="stylesheet" type="text/css" href="test.css" />
		<script type="text/javascript">
                        var blocMenu = document.getElementById("menu");
                        var blocContenu = document.getElementById("contenu");
                        
                        blocMenu.style.height=blocContenu.clientHeight + "px";
                </script>
	</head>
	<body>		 
	<div id="menu">
  	ici le menu. Je voudrais que la hauteur de cette DIV soit la même que la DIV "contenu"
	</div>
	<div id="contenu">
  	La hauteur des pages qui saffichent varient
  	<p>
  		Nunc rhoncus vulputate arcu vitae congue. Proin id nulla turpis. Sed consequat orci id convallis tempor. Fusce libero erat, congue at vehicula a, congue at elit. Integer volutpat malesuada ipsum, ut posuere risus finibus non. Morbi in aliquet sem. Sed
    	a neque velit. Praesent suscipit felis nulla, ut varius turpis mollis in. Quisque in lectus eu nulla laoreet cursus molestie sed odio. Ut consequat sed elit ut ultricies. Suspendisse orci est, porta in nisi in, blandit cursus sapien. Praesent viverra
    	lobortis justo aliquet maximus.
    </p>
  	<p>
  		Nunc rhoncus vulputate arcu vitae congue. Proin id nulla turpis. Sed consequat orci id convallis tempor. Fusce libero erat, congue at vehicula a, congue at elit. Integer volutpat malesuada ipsum, ut posuere risus finibus non. Morbi in aliquet sem. Sed
    	a neque velit. Praesent suscipit felis nulla, ut varius turpis mollis in. Quisque in lectus eu nulla laoreet cursus molestie sed odio. Ut consequat sed elit ut ultricies. Suspendisse orci est, porta in nisi in, blandit cursus sapien. Praesent viverra
    	lobortis justo aliquet maximus.
    </p>
</div>
	<p style="display:none"> invisible text </p>
	<a href="http://codepen.io/anon/pen/avbENm">test avec codepen</a>
	<br />
	<a href="http://www.developpez.net/forums/d1540236/webmasters-developpement-web/mise-page-css/hauteur-d-div-fonction-d-div/">discution sur le forum</a>
	</body>
</html>

Code css :

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

1
2
3
4
5
6
7
#menu {
	border:1px solid silver;
	                 }
#contenu {
    /* height:100px; */
    border:1px solid silver;
	}

Comme, j'ai l'intention d'apprendre le Javascript dans un futur proche, je me permets de vous poser la question. J'imagine que pour vous ça ne doit pas être compliqué.

D'avance, merci pour votre aide.