hauteur menu 100%

Invité · 11/07/2008, 16h12

Bonjour,

je vous donne le squelette XHTML :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head></head>
<body>
<!-- header -->
<div id="header"></div>
 
<!-- outerWrapper -->
<div id="outerWrapper">
 
<!-- innerWrapper -->
<div id="innerWrapper">
 
<div id="bar"><?php echo $nom; ?> </div>
<!-- content -->
<div id="content"> <?php echo $contenu; ?>
</div>
<!-- fin content -->
 
<!-- leftMenu -->
<div id="leftMenu"><?php echo $menuGauche; ?> </div>
<!-- fin leftMenu -->
 
<!-- clearer -->
<div class="clearer">&nbsp;</div>
</div> 
<!-- fin innerWrapper -->
<!-- clearer -->
</div> 
<!-- fin outerWrapper -->
<!-- footer -->
<div id="footer"></div>
<!-- fin footer -->
</body>
</html>

Je n'arrive pas à faire en sorte que mon menu prenne une hauteur à 100% (en gros que le menu s'adapte au contenu en hauteur)

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
16
17
18
19
20
21
22
23
24
25
26
 
#innerWrapper { 
height:auto;
}
 
#outerWrapper { 
margin:0 auto;
width:1060px;
border:1px solid black;
}
 
#leftMenu { 
  /*background-color: blue; */
  width: 21%;
  float: left;
  height:100%;
}
 
#content {
/*background-color: green; */
  width:78%;
  float:right;
  text-align:left;
  margin:0;
  padding:0;
}

Le resultat:
http://www.monsterup.com/image.php?u...1215785519.jpg

J'ai essayé de mettre le menu dans la div content (en supprimer les float et en ajoutant position:relative dans le content mais du coup il faut que je réaligne manuellement le contenu à chaque fois)

**FraK** · 15/07/2008, 09h30

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
html, body {
margin: 0;
padding: 0;
height: 100%
}
 
 
#outerWrapper { 
margin:0 auto;
width:100%;
height: 100%;
border:1px solid black;
}
(si je vois biens c'est le div qui contiens tout ton site)
 
 
identifiant{
 
}
#leftMenu { 
  /*background-color: blue; */
  width: 21%;
  float: left;
  height:100%;
  min-height: valeur px;
  max-height: valeur px;
}

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head></head>
<body> 
<!-- outerWrapper -->
<div id="outerWrapper">
 <!-- header -->
<div id="header"></div>
<!-- innerWrapper -->
<div id="innerWrapper">
 
<div id="bar"><?php echo $nom; ?> </div>
<!-- content -->
<div id="content"> <?php echo $contenu; ?>
</div>
<!-- fin content -->
 
<!-- leftMenu -->
<div id="leftMenu"><?php echo $menuGauche; ?> </div>
<!-- fin leftMenu -->
 
<!-- clearer -->
<div class="clearer">&nbsp;</div>
</div> 
<!-- fin innerWrapper -->
<!-- clearer -->
</div>
<div id="footer"></div>
<!-- fin footer --> 
<!-- fin outerWrapper -->
<!-- footer -->
 
</body>
</html>

hauteur menu 100%

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager