Bonjour tout le monde,

Je me permet de créer ma première discussion car j'ai un problème qui me casse la tête depuis des heures et, malgré mes recherches, aucune solution ne fonctionne.

Voici mon problème, pourtant simple: je souhaiterais que mon contenu occupe 100% de la hauteur de la page et ce même si le contenu est trop court. Donc, que le fond blanc de #global recouvre toute la hauteur de la page dont le fond lui est vert.

Voici mon code source 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
html, body
{
margin: 0;
padding: 0;
height: 100%;
align: center;
font: 12px "Calibri", helvetica, sans-serif;
background-color: #95a712;
}
#global
{
position: relative;
width: 750px;
min-height: 100%;
margin: 0;
padding: 0;
text-align: left;
background-color: #FFFFFF;
}
#menu
{
font: 16px "Calibri", helvetica, sans-serif;
text-align: justify;
padding: 3%;
}
#menu a
{
text-decoration:none;
padding-top: 10px;
padding-left: 10px;
padding-right: 30px;
margin-right: 20px;
border-top:1px solid #000000;
color: #000000;
}
#menu a:hover
{
border-top:3px solid #95a712;
color: #95a712;
}
J'ai bien appliqué une hauteur de 100% à Body et HTML, avant de l'appliquer à mon #global.

Voici le code source HTML:

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
<html>
<head>
Blah Blah
</head>
<body>
 
<div align="center">
<div id="global">
 
<img src="logo.png"><p />
 
 <div id="menu">
  <div id="text-menu">
<a href="index.html">Accueil</a>
 </div>
  </div>
 
</div>
</div>
 
</body>
</html>
D'avance, merci pour votre aide!

A noter que cela fonctionne uniquement sur Chrome