La propriété "height"

**Uchiwa-Sasuke** · 23/01/2013, 21h15

Bonjour/Bonsoir,

Je rencontre un petit problème sous Mozilla Firefox (ouais je sais c'est rare) qui interprète mal mon code en CSS.
Tout d'abord, voila mon code HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>On verra plus tard :P</title>
		<link rel="stylesheet" href="styles/style.css" />
	</head>
 
	<body>
		<div id="page">
		</div>
	</body>
</html>

Et ici mon code 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
html, body{
   margin: 0px;
   padding: 0px;
   height: 100%;
   background-color: yellow;
}
 
#page{
   background-color: red;
   height: 100%;
   width: 100%;
   margin : 0px;
   padding : 0px;
}

Avec ces codes, je devrais normalement avoir mon "div" qui fait 100% de la page (et donc celle-ci devrait être toute rouge), mais le problème c'est qu'il y a toujours une petite barre jaune (qui provient donc de la balise "html" ou "body") qui se rajoute en dessous de mon "div" et donc une scrollbar apparait ce que je trouve assez frustrant car je n'arrive pas à me l'expliquer

Voila une image au cas où je m'exprimerais mal :
ICI

Si quelqu'un avait une explication et une solution pour régler ce problème ce serait sympa !

Merci d'avance.

**Muchos** · 23/01/2013, 22h14

Bizarre… Tu as peut-être un problème de sharingan, car sous mon Firefox (17 pour Ubuntu), la div prend toute la hauteur

**Uchiwa-Sasuke** · 23/01/2013, 22h29

Ah oui ? Et tu n'a pas de scrollbar (ascenseur) sur le coté ?
En tout cas mon Sharingan fonctionne très bien

**Muchos** · 23/01/2013, 22h31

Pas de scrollbar!
Quelle est ta version de FF? As-tu rafraîchi le cache (en cas d'ancienne css, si tu dev en ligne ou avec un serveur local)?

**Uchiwa-Sasuke** · 23/01/2013, 22h38

Je suis sous FF 18.0.1 et oui je boss en local sous WAMP.
Je vais essayer de rafraichir le cache et je te tiens au courant (en éditant mon message).

EDIT : J'ai vidé le cache et ça n'a rien changé

**JefReb** · 24/01/2013, 10h31

Il me semble qu'il y a un défaut à body qui est un

Code :

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

margin:8px

Il faudrait faire au début du css

Code :

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

html, body 	{ margin:0; padding:0; height:100%; font-size:100%; }

Juste une idée. Si ça peut aider ...

**thelvin** · 24/01/2013, 11h44

Je n'ai pas le problème non plus, sous Windows avec FF 18.0.1

Je soupçonne que le fichier CSS lu ne soit pas celui qu'on nous montre.
Ou alors qu'il y ait des en-têtes HTTP zarbi changeant la taille du viewport.

Envoyé par JefReb

Il faudrait faire au début du css

Code :

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

html, body 	{ margin:0; padding:0; height:100%; font-size:100%; }

Comme il le montre, il le fait déjà.

**Uchiwa-Sasuke** · 24/01/2013, 19h17

Si le problème ne se manifeste pas chez vous c'est une bonne nouvelle et ça veut dire que le problème vient peut-être de la configuration de mon navigateur ou autre mais en tout cas le problème ne se situe pas au niveau du CSS apparemment...

P.S : Le problème n'est pas présent sous Chrome et IE