CODEWITHSUNDEEP
css
antoine
antoine

Reputation: 115

Basic height percentage

I don't understand how height percentages work.

Why is the following snippet not filled with color?

body {
  height: 100%;
}
#div1 {
  height: 20%;
  background-color: red;
}
#div2 {
  height: 80%;
  background-color: blue;
}
<div id="div1"></div>
<div id="div2"></div>

Upvotes: 1

Views: 45

Answers (3)

sandipon
sandipon

Reputation: 986

use this code: 

html,body {
 height:100%;
}

Upvotes: 0

Weafs.py
Weafs.py

Reputation: 22992

You have to set the html's height as well.

html,
body {
  height: 100%;
  margin: 0;
}
#div1 {
  height: 20%;
  background-color: red;
}
#div2 {
  height: 80%;
  background-color: blue;
}
<div id="div1"></div>
<div id="div2"></div>

Upvotes: 3

Leo
Leo

Reputation: 13838

You need to set height: 100% to <html> as well:

html,body {
    height:100%;
}

#div1 {
    height: 20%;
    background-color: red;
}

#div2 {
    height: 80%;
    background-color: blue;
}
<div id="div1"></div>
<div id="div2"></div>

Upvotes: 0

Related Questions