CSS

**MaximeL09** · 03/08/2012, 12h04

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

**NoSmoking** · 03/08/2012, 12h58

Bonjour,
tu peux toujours t'inspirer de la solution disponible dans cette discussion, il te suffit de faire disparaître le footer.

**MaximeL09** · 03/08/2012, 20h07

Merci pour le lien

Apparemment le problème venait du fait que je n'avais pas mis "<!DOCTYPE HTML>"...

Sans ça, ca ne marche pas, et avec bien...

Par contre, quand je rajoute un <div align="center"> au dessus du <div id="page">, ça ne marche plus