Page en height:100%

Invité · 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]

Page en height:100%

CSS

Vue hybride

Discussions similaires

Partager

Partager