Partage

problème de compréhension taille en %

Sujet résolu
7 décembre 2017 à 16:27:05

Bonjour à tous.

J'étudie en ce moment le cours sur HTML/CSS.

Je bute sur quelque chose de simple, mais je ne pige pas.

Jusqu'à présent je définissait la taille de mes éléments en px ( div, conteneur, header, footer etc...)

Maintenant je souhaite les définir en %.

je fait donc par exemple:

HTML:

<div class='boiteAvide'>     </div>    (jusque là no soucy)

CSS:

.boiteAvide { background-color: red;

              width:80%;

               height:80%; } 

Et quand je fait ça, il n'y a rien qui s'affiche , alors que si je remplace les % par des valeur en px, la ça fonctionne...

Je pense que ça doit pas être grand chose mais je bloque...

Staff 7 décembre 2017 à 16:37:14

Bonjour,

les pourcentages sont en fonction du parent. Or un élément vide n'a pas de hauteur. Et 80% de 0, ça fait 0. Donc ton élément n'a pas de hauteur.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
7 décembre 2017 à 16:38:59

Bonjour,

Sujet évoqué 12 666 fois sur le forum et partout ailleurs sur le web.

Piste pour t'en sortir : si tu définit une largeur ou hauteur en %, assures toi que sont parent ai lui aussi une hauteur ou largeur définit en %.

Dans ton cas, imaginons que le parent de .boitAvide soit body, quelle largeur fait body? Quelle hauteur fait body?

Edit : Grilled by Lamecarlate

-
Edité par Lord Morpheus 7 décembre 2017 à 16:39:24

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
7 décembre 2017 à 16:39:55

j'ai éssayer de mettre une taille en % a mon body, rien ne change.

-
Edité par dark_dadis 7 décembre 2017 à 17:05:38

7 décembre 2017 à 16:49:11

As tu testé avant de poser ta question?
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
7 décembre 2017 à 17:07:42

Lord Morpheus, oui je viens d'essayer cependant rien ne change.

J'ai ajouté dans mon css

body{width:100%;

         height:100%;

}

7 décembre 2017 à 17:10:11

Bonjour, 

mais ce body, il n'aurait pas un parent, par hasard?

7 décembre 2017 à 17:10:36

+1 ChrisLebure
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
7 décembre 2017 à 17:14:53

OK les gars j'ai pigé le concept ;)

Html, body {width:100%; height:100%;}

ça fonctionne comme sur des roulettes!

Désolé du dérangement et merci d'avoir pris le temps de m'aider !

bonne continuation et bonne fin de journée!

Staff 7 décembre 2017 à 19:30:26

width: 100% n'est pas nécessaire.

https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/ 

(et ya pas que des gars ici, pour info)

-
Edité par Lamecarlate 7 décembre 2017 à 19:31:31

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
7 décembre 2017 à 23:56:09

Merci pour le lien très intéressant  🤘 et j'ai utilisé le terme ''les gars'' plus comme une expression amical que comme si je m'adressais seulement a des hommes. Cependant dsl si cela a été mal pris. Donc je reformule en disant tout simplement ''merci à tous''.

Bonne soirée 

Staff 8 décembre 2017 à 7:12:42

Bonne continuation :)

(je comprends tout à fait, je lutte seulement contre un abus de langage qui, par moments, est fatigant :) )

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

problème de compréhension taille en %

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown