Problème attribut HEIGHT

belgikoi Messages postés 44 Date d'inscription   Statut Membre Dernière intervention   -  
belgikoi Messages postés 44 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
je ne sais pas pourquoi, j'ai souvent des problèmes avec l'attribut height d'une div ou autre.
J'arrive à mettre une taille fixe en pixels (ex: height: 200px;).
Mais je n'arrive pas à mettre une taille en pourcentage (ex: height: 20%;).

Je code en HTML5 + CSS3, et j'ai ce problème pour des div, des img et des iframe... En fait, je pense que j'ai ce problème pour n'importe quel élément.
J'ai également testé en mettant l'attribut directement dans le code HTML; ça n'a rien changé.

PS: J'ai testé avec Chrome, FireFox et Opera...
Voilà un exemple de redimensionnement que ne fonctionne pas:
<header>
     <img src="content/header.png" alt="header" height="20%">
</header>


Cordialement, belgikoi



3 réponses

dariumis Messages postés 571 Date d'inscription   Statut Membre Dernière intervention   63
 
Salut,
les pourcentage pour les height ne fonctionne pas dans un élément parent défini en auto, qui est la valeur définie si aucun height n'est renseigné.

Ca ne marche que si le conteneur parent contenant un ton image possède un height définie.
0
belgikoi Messages postés 44 Date d'inscription   Statut Membre Dernière intervention   6
 
Bonjour,
donc, si je veux mettre un height en pourcentage, il faut définir le height des éléments parents ? Mais, je ne pourrais pas mettre de height en pourcentage pour les éléments parents...
Parce que je mets des pourcentages pour éviter d'avoir des surprises avec un écran plus petit ou plus grand que celui de test...

Donc, si je met :
body {
          height:100%;
          }

header {
              height: 20%;
             }

ça n'ira pas, si ?
De plus, j'ai essayé de mettre une taille dans mon body en pixel (1000px), et j'ai laissé mon header en pourcentage, et bien, ça n'a pas fonctionné... :(
0
belgikoi Messages postés 44 Date d'inscription   Statut Membre Dernière intervention   6
 
Bonjour, j'ai remarqué, qu'en mettant:
CSS:
header 
{
  height: 15%;
}


HTML:
<header>
     <img src="content/header.png" alt="header" height="100%">
</header>


Sous Chrome, ça marche, mais pas sous FireFox, quelqu'un a une astuce ?
0