Page en height:100% [Résolu]

kéraunos · 30/03/2011, 21h28

Bonjour à tous.

Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    [...]
</head>
 
<body>
    <div id="page">
        Contenu
    </div>
</body>
</html>

Mon but : faire en sorte que la div "page", qui fait 900px de large (donc qui se détache du fond du body) prenne au moins 100% de la hauteur du navigateur, quelle que soit la quantité de son contenu.

Où j'en suis : Après quelques recherches, j'ai trouvé comment faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
html, body {
  height: 100%;
}
 
#page {
  width: 900px;
  height: 100%;
  background: #ddf;
}

La solution a l'air simple, je l'ai testée avec succès (sous Mac OS X) sur Firefox 4, Safari 5, Opera 9 et Chrome 10.

Ma question : d'après ce que vous en savez, est-ce une solution valide universellement ?
(je ne dispose pas de Windows pour tester sur IE, merci de me tenir informé

)

Merci !

ornitho13 · 30/03/2011, 21h52

Salut,

oui c'est valide sur IE. J'ai testé sur IE6, IE7, IE8 et IE9.

Par contre, je te conseille d'enlever les marges pour IE :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
html, body {
  height: 100%;
  margin:0;
  padding:0;
}
 
#page {
  width: 900px;
  height: 100%;
  background: #ddf;
}

NoSmoking · 30/03/2011, 21h56

Va y fonce !
on peut rajouter le margin et padding à 0, la config. par défaut des navigateurs étant différente.

Code :

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

1
2
3
4
5
html, body {
  height : 100%;
  margin : 0;
  padding : 0;
}

[edit]
OUF! je n'ai pas écris de c#!!£$ie
[/edit]

kéraunos · 30/03/2011, 22h53

Merci.

... Mais j'ai une autre question.

A présent, j'ajoute deux div à l'intérieur de "page" :

Code :

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

1
2
3
4
5
6
7
8
9
 
<div id="page">
  <div id="header">
    [... bandeau ...]
  </div>
  <div id="content">
    [... contenu de ma page ...]
  </div>
</div>

Mon header a une hauteur fixe, tandis que celle de content varie. Pour des raisons qui tiennent à la présentation du tout (en réalité mon problème est un peu plus complexe), je veux que la div content occupe au moins tout le reste de la fenêtre du navigateur, jusqu'en bas, lorsque son contenu n'atteint pas le bas. Mais ce que je ne veux pas, c'est que la div content fasse par défaut 100% de sa div contenante (page), car alors elle dépasse de la fenêtre du navigateur (en dépassant aussi de page d'ailleurs, si je ne m'abuse), à cause du header.

Dans mon exemple simplifié, on pourrait être tenté de faire passer le fond de page pour celui de content, ce qui règlerait le problème. Mon code étant un peu plus tordu, c'est vraiment ce que j'ai décrit dans le paragraphe précédent dont j'ai besoin.

Par souci de clarté, un petit dessin en guise de cahier des charges, avec une petite difficulté supplémentaire (le footer) :

J'espère être clair.

Merci.

silverockets · 31/03/2011, 09h08

Salut,
Je pense que ce que tu veux c'est ca en fait :

Code :

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

1
2
3
4
 
div#page{
           min-height : 100%;
}

Avec ca, ton div fera au moins la taille de la fenetre en hauteur et s'etirera ou non selon son contenu.

kéraunos · 02/04/2011, 15h40

Ok, merci pour div#page.

Mais cela ne règle pas le problème de div#content: si j'utilise min-height pour div#page, alors l'attribut height de div#content, utilisé avec des valeurs en %, n'a plus d'effet.

Or je souhaite que div#content occupe au moins 100% de l'espace restant entre div#header et div#footer, qui, eux, ont des hauteurs fixes (en px). Or, "espace restant", dans le flux de la page, ça ne veut un peu rien dire. Il faudrait peut-être commencer par forcer div#footer à se placer en bas de div#page. Mais bon, je suis un peu perdu.

Pouvez-vous m'aider ?

NoSmoking · 04/04/2011, 21h51

voici un schéma possible

Code html :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
html, body {
  height : 100%;
  margin : 0;
  padding :0;
  font-family : Verdana;
  font-size : 1em;
}
.larg {
  width : 800px;
  margin : 0;
  margin-left : auto;
  margin-right : auto;
  border-left : 1px solid #e0e0e0;
  border-right : 1px solid #e0e0e0;
}
#main_page {
  min-height : 100%;
  background-color : #e0fee0;
}
#tete_page{
  height : 70px;
  background-color : #e0e0fe;
}
#corps_page{
  overflow : hidden;
	padding : 10px;
	padding-bottom : 50px;  /* hauteur pied de page */
}
#pied_page{
	margin-top : -50px;     /* - hauteur pied de page */
	height : 50px;
	clear : both;
  background-color : #fee0e0;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="main_page" class="larg">
  <div id="tete_page">
    <b>ENTETE</b>
  </div>
  <div id="corps_page">
    <b>Corps de page</b>
    <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
  </div>
</div>
<div id="pied_page" class="larg">
 EMPIED
</div>
</body>
</html>

kéraunos · 05/04/2011, 01h59

Super !

Merci beaucoup.

02/04/2011, 15h40	#6
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Ok, merci pour div#page. Mais cela ne règle pas le problème de div#content: si j'utilise min-height pour div#page, alors l'attribut height de div#content, utilisé avec des valeurs en %, n'a plus d'effet. Or je souhaite que div#content occupe au moins 100% de l'espace restant entre div#header et div#footer, qui, eux, ont des hauteurs fixes (en px). Or, "espace restant", dans le flux de la page, ça ne veut un peu rien dire. Il faudrait peut-être commencer par forcer div#footer à se placer en bas de div#page. Mais bon, je suis un peu perdu. Pouvez-vous m'aider ?
	00

05/04/2011, 01h59	#8
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Super ! Merci beaucoup.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email