Applying background color to an empty div

user_13675819 0
Viewed 1069

I just started working on a new website, and I'm just trying to map out where everything will go. I made a few divs of the stuff I want. When trying to add the background color to them in CSS it doesn't apply the color.

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;
}
css html
3 Answers

Change the height to be in pixels or rems rather than in a percentage(%). Percentages are based on the value of the parent element (which is currently 0).

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

The height need a value.. 20% of what ? Try height: 30px to see.

Maybe you can try: height: 20vh; too.

Will do what you want: 20%

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

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

Viewport Height (vh). This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.

you can visit it to get more details : Css Viewport Units

user_127345690
Related