3 votes

Appliquer une couleur d'arrière-plan à un div vide

Je viens de commencer à travailler sur un nouveau site Web, et j'essaie de déterminer où tout doit aller. J'ai créé quelques divs avec les éléments que je veux. Lorsque j'essaie de leur ajouter la couleur d'arrière-plan en CSS, la couleur ne s'applique pas.

HTML

<body>
    <div class="header"></div>
    <div class="hero"></div>
    <div class="ads"></div>
    <div class="content-1"></div>
    <div class="content-2"></div>
    <div class="form"></div>
    <div class="footer"></div>
</body>

CSS

html {
    font-family: 'Muli', sans-serif;
}

.header {
    width: 100%;
    height: 20%;
    background-color: #7fffd4ad;
}

2voto

AlexVWeb Points 41

Modifiez la hauteur pour qu'elle soit exprimée en pixels ou en rems plutôt qu'en pourcentage (%). Les pourcentages sont basés sur la valeur de l'élément parent (qui est actuellement 0).

.header {
 width: 100%;
 height: 20vh; // or 20px, 1em, 1rem ...
 background-color: #7fffd4ad;
}

1voto

Ikkyy Points 84

La hauteur a besoin d'une valeur 20% de quoi ? Essayez height : 30px pour voir.

Vous pouvez peut-être aussi essayer : height : 20vh ;.

Fera ce que vous voulez : 20 %.

.header {
    width: 100%;
    height: 20vh;
    background-color: #7fffd4ad;
}

0voto

ahmed Points 11
.header {
    width: 100%;
    height: 20vh; 
    background-color: #7fffd4ad;
}

Hauteur de la fenêtre d'affichage (vh). Cette unité est basée sur la hauteur de la fenêtre d'affichage. Une valeur de 1vh est égale à 1 % de la hauteur de la fenêtre d'affichage.

vous pouvez le visiter pour obtenir plus de détails : Css Viewport Units

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X