Discussion :

[philippef]

Bonjour,

J'ai cherché sur le net mais les réponses ne me conviennent pas.
Donc voici mon souci. J'ai une DIV alignée à gauche qui contient un menu et une DIV à sa droite qui contiennent les pages du site.
Je voudrai que la hauteur de la DIV qui contient le menu varie en fonction de la hauteur de la DIV de droite
voici mon code :
1/ le CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div#menu {
	float:left;
	width:220px;
	height:650px;
	background-color:#A52A2A;
	}
div#contenu {
	float:left;
	margin-left:25px;
	margin-top: 25px;
	width:990px;
	color : black;
	font-family:verdana;
	font-size:13px;
	}

2/ le code de la page index (pour simplifier je donne seulement les DIV)

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="bandeau">
       blablabla
</div>
<div id="menu">
       ici le menu. Je voudrai la hauteur de cette DIV soit la même que la DIV "contenu"
</div>
<div id="contenu">
       La hauteur des pages qui s'affichent varient 
</div>

Merci d'avance de votre aide

[Invité]

Bonjour,

FAQ CSS.

[philippef]

J'ai donc cherché dans la FAQ et contrairement à ce qui est écrit sous mon profil je suis loin d'être "membre expérimenté".
Donc si quelqu'un veut bien m'aider !!!

[Jacques Beauregard]

Bonjour,

Je t'ai fait un petit exemple :
HTMl :

Code :

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

1
2
3
4
5
6
<div id="menu">
       ici le menu. Je voudrai la hauteur de cette DIV soit la même que la DIV "contenu"
</div>
<div id="contenu">
       La hauteur des pages qui saffichent varient 
</div>

Je crée deux div qui serviront d'exemple. Le 1er div n'a pas de hauteur définit.
Le 2e div a une hauteur de 100px.

CSS :

Code :

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;
	}

Ajout de border pour y voir plus clair sur la hauteur des div

Javascript :

Code :

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

1
2
3
4
var blocMenu = document.getElementById("menu");
var blocContenu = document.getElementById("contenu");
 
blocMenu.style.height=blocContenu.clientHeight + "px";

Je récupère la hauteur du <div> #contenu et je set la hauteur du <div> #menu

[friendofweb]

Excellent ! J'ai testé le code avec Codepen. J'imagine que l'intérêt d'adapter la hauteur des deux div, est que les div soient alignés côte à côte. (Ce que je ne maîtrise pas encore).

[Invité]

Bonjour,

en CSS3, voir :

• display:table;
• display:flex;

[philippef]

Mon premier souci c'est que la DIV Contenu varie en fonction des pages affichées.
Je me demande si le plus simple n'est pas de définir la même hauteur pour les 2 DIV. Mais cela ne me plait pas trop !!

[Invité]

Bonjour,

tu pourrais au moins avoir la curiosité de tester les codes qui te sont proposés,
et faire une recherche si nécessaire.

Pour le code proposé :
enlève le height:100px;(inutile), et ajoute du texte dans le contenu => tu verras ce que ça fait.

Quant à display:table; / display:flex; :

[friendofweb]

Bonjour,

Le code fonctionne à merveille via le site codepen, mais pas sur ma machine. Du coup, j'hésite à créer une nouvelle discussion, car je crains de sortir du sujet actuel.
En résumé, je constate des différences, mais ne les comprends pas, avec "firebug" de Mozilla. Voici, un aperçu de ce qui est différent :





Pourtant, pour être sûr et j'ai encore vérifié, j'ai fait un simple copier coller depuis ce qui fonctionne avec codepen vers un template avec structure html5 créée au préalable, dans le body bien sûr. Et pour javascript, j'ai copier coller le code entre les balises script en précisant javascript, dans le head...

Y aurait-il un moustique (bug) dans ma machine ?
Qu'est-ce que je fais, je crée une nouvelle discution ?

[Invité]

Bonjour,
SANS JavaScript :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="main">
  <div id="menu">
    ici le menu...
  </div>
  <div id="contenu">
    La hauteur des pages qui saffichent varient<br /> 
    La hauteur des pages qui saffichent varient<br /> 
    La hauteur des pages qui saffichent varient<br /> 
    La hauteur des pages qui saffichent varient<br /> 
    La hauteur des pages qui saffichent varient<br /> 
    La hauteur des pages qui saffichent varient<br /> 
  </div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#main {
  display:flex;
  flex-direction:row;
}
#menu {
	width:30%;
  padding:20px;
  background:green;
}
#contenu {
	width:70%;
  padding:20px;
  background:yellow;
}

[friendofweb]

Merci ! Je vais expérimenter le code (demain à priori). En ce qui concerne celui du Javascript, je me concentrerai dessus plus tard (sauf si vous avez le temps), car pour l'instant, je me concentre sur le CSS pour ne pas mettre la charrue avant le bœufs..

[philippef]

Je m'étais attaché à un autre problème que j'ai résolu et je viens de tester votre code. C'est tout à fait ce que je souhaitais.
je ne connais pas du tout "display:flex" ni "flex-direction:row"

Encore merci.