Basic height percentage

前端未结

关注

 3  1337

I don\'t understand how height percentages work.

Why is the following snippet not filled with color?

相关标签:

3条回答

2021-01-24 02:28

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>

0 讨论(0)

2021-01-24 02:36

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>

0 讨论(0)