hauteur de div automatique en fonction de l'espace libre

**boutmos** · 29/12/2008, 13h26

bonjour,

J'ai un conteneur de hauteur variable nommé #principale
dans celui ci j'ai a gauche un menu nommé #menu et a droite une div nommée #contenu qui contient des formulaires.

sur la div #menu j'ai un border-right : 1px solid #555; qui permet de faire une jolie séparation.

Probleme : Lorsque ma div #contenu est supérieur en hauteur a la div #menu, mon border-right ne descend pas correctement jusqu'à mon pieds de page. Car la hauteur de #menu est fixée en fonction de ce quelle contient et non pas en fonction de l'espace libre disponible par #principale

web developper m'indique la hierarchie suivante :
html > body > div#conteneur > div#principale > div#menu

J'ai essayé la propriété : height : inherit; sur la div #menu afin qu'elle ai la meme hauteur que son conteneur mais çà ne change rien.

Avez vous une astuce plz ?? D'avance, merci.

EDIT : J'ai bien une astuce c'est de mettre une image en background d'un gif transparent de 1px de haut et de faire un repeat-y pour dessiner la bordure sur ma div #principale mais çà serait clairement du bricolage et ne reglerais pas ce soucis de CSS, d'autant plus que ce n'est pas la 1ere fois que je suis confronté a cette situation.

**Macmillenium** · 29/12/2008, 14h06

Envoyé par boutmos

EDIT : J'ai bien une astuce c'est de mettre une image en background d'un gif transparent de 1px de haut et de faire un repeat-y pour dessiner la bordure sur ma div #principale mais çà serait clairement du bricolage et ne reglerais pas ce soucis de CSS, d'autant plus que ce n'est pas la 1ere fois que je suis confronté a cette situation.

Pourquoi du bricolage ? à part le background je ne vois pas d'autres solutions pour cette situation !

**Raphael_Lemaire** · 29/12/2008, 14h21

Salut Boutmos.

Est-ce bien quelque chose comme cela que tu aimerais avoir ? (fonctionne sous FF3 et IE7) :

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
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
 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Truc</title>
		<style type="text/css">
		body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}
 
		#principale {
			width: 100%;
			height: 100%;
		}
 
		#menu {
			border-right: 2px solid #DDDDFF;
			width:20em;
			margin-right: 1em;
			height : 100%;
			position:absolute;
			left:0;
			top:0;
		}
		</style>
    </head>
    <body>
        <div id="principale"> 
			<div id="menu">
			test
			</div>
			<div id="contenu">
			test
			</div>
		</div>
    </body>
</html>

**boutmos** · 29/12/2008, 14h54

lol c'est exactement çà, je suis effectivement entrain de regarder les solutions apportées et pour le moment çà avance :

j'ai mis un height: 100% sur chaque conteneur parents. Ca marche sur tous les navigateurs sauf que sur IE j'ai une marge mais ma bordure descend anormalement ; je continue mes tests. Merci

**Macmillenium** · 29/12/2008, 15h00

Envoyé par Raphael_Lemaire

Salut Boutmos.

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
 
		#principale {
			width: 100%;
			height: 100%;
		}
 
		#menu {
			border-right: 2px solid #DDDDFF;
			width:20em;
			margin-right: 1em;
			height : 100%;
			position:absolute;
			left:0;
			top:0;
		}

Attention au positionnement absolute, la div menu n'est pas positionné par rapport a son conteneur parents "principale" ...

**boutmos** · 29/12/2008, 15h26

çà ne marche pas ce code ,

si le contenu de #principale est faible, on se retrouve avec #principale.height = #menu.height, j'ai mon menu qui se retrouve coupé.

J'etais arrivé au même resultat =(

**Raphael_Lemaire** · 29/12/2008, 21h57

Envoyé par Macmillenium

Attention au positionnement absolute, la div menu n'est pas positionné par rapport a son conteneur parents "principale" ...

C'est vrai, il manque le position : relative sur le parent.

**Raphael_Lemaire** · 29/12/2008, 22h53

Envoyé par Raphael_Lemaire

C'est vrai, il manque le position : relative sur le parent.

Euh je disais nimps là.

Ton problème c'est que si ton contenu dépasse la hauteur du document, ta barre à gauche (qui fait la taille du document avec le height à 100% d'alsa) ne suit pas et reste à la taille du document, donc quand tu scrolle, ça ne vas pas.

J'ai cherché dix minutes et j'avoue ne pas avoir trouvé de solution pour le moment.

Enfin si ça ça marche :

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
16
17
18
19
20
21
 
html, body, #principale {
	margin: 0;
	padding: 0;
}
#principale {
	display: table-row;
}
 
#menu {
	border-right: 2px solid #003;
	width:20%;
	background-color: #DDF;
	display: table-cell;
}
 
#contenu {
	width: 78%;
	display: table-cell;
	padding-left: 1em;
}