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

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 :

Pièce jointe 186932 Pièce jointe 186933

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

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.