problème avec une propriété css "height"

**ferhat.adel** · 26/02/2011, 11h39

bonjour a tous le monde je suis un débutant dans le développement web
voici un petit code que j'ai fait

Code :

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

1
2
3
4
5
6
7
 
div
{color:#0C3;
width:100%;
height:100%;
background-color:#C00;
}

la propriété height:100% ne marche pas (j'ai vérifié grace à la couleur du fond elle ne couvre pas tout l’écran pour la largeur sa marche je utilise firefox 3.6
merci

**NoSmoking** · 26/02/2011, 14h09

Bonjour,
ajoutes ceci dans ta feuille de style

Code :

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

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

**ferhat.adel** · 26/02/2011, 14h15

bonsoir votre méthode ne marche pas

merci

**NoSmoking** · 26/02/2011, 14h22

Envoyé par ferhat.adel

bonsoir votre méthode ne marche pas
merci

pour test

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Full Screen</title>
<style type="text/css">
html, body {
  margin :0;
  padding : 0;
  height : 100%;
}
div{
  color:#0C3;
  width:100%;
  height:100%;
  background-color:#C00;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

si cela ne fonctionne pas, le problème est ailleurs...

**ferhat.adel** · 26/02/2011, 14h34

bonsoir merci pour votre réponse mais pourquoi on doit mettre padding et margin égales à zéro

merci

**NoSmoking** · 26/02/2011, 14h47

Envoyé par ferhat.adel

bonsoir merci pour votre réponse mais pourquoi on doit mettre padding et margin égales à zéro

merci

simplement pour mettre sur le même plan d'égalité tous les navigateurs, les valeurs par défaut de ceux ci n'étant pas les mêmes pour ces propriétés.

**ferhat.adel** · 26/02/2011, 14h49

bonsoir merci mais pk on doit mettre height:100% dans la balise body j'ai remarque que si j’élève ca marche pas

merci

**NoSmoking** · 26/02/2011, 14h55

Envoyé par ferhat.adel

bonsoir merci mais pk on doit mettre height:100% dans la balise body j'ai remarque que si j’élève ca marche pas

merci

pour forcer le body a occuper toute la place disponible, par défaut il prend 100% de la largeur mais n'occupe que la hauteur minimum nécessaire, voila le pourquoi du height:100%

**ferhat.adel** · 26/02/2011, 15h02

bonsoir merci pour votre réponse
mais pk on doit forcez la balise body à weight:100% puisque j'ai mis 100% à la balise div
je suis vraiment perdu (ya t'il un héritage ou pas des propriété dans la balise <body> vers la balise <div>
mais on mis weight:100% pour la balise <div>
merci

**NoSmoking** · 26/02/2011, 15h14

quand on met sur un élément une width et/ou une height à 100% cela signifie que cet élément occupe 100% de la largeur, et/ou de la hauteur de son conteneur.
Pour ta DIV son conteneur est le body, donc il faut forcer le body à occuper 100% de la largeur et/ou hauteur de son propre conteneur qui est le html, pour certains navigateurs, ou la fenêtre plus généralement...

problème avec une propriété css "height"

CSS

Discussions similaires

Partager

Partager