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 : 197
Taille : 31,6 Ko

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

Nom : firebug.jpg
Affichages : 178
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.