Question

我不明白高度百分比的工作原理。

为什么以下代码段没有填充颜色？

body {
  height: 100%;
}
#div1 {
  height: 20%;
  background-color: red;
}
#div2 {
  height: 80%;
  background-color: blue;
}

<div id="div1"></div>
<div id="div2"></div>

Answer 1

您还必须设置html的{{1}}。

height

html,
body {
  height: 100%;
  margin: 0;
}
#div1 {
  height: 20%;
  background-color: red;
}
#div2 {
  height: 80%;
  background-color: blue;
}

Answer 2

您还需要将height: 100%设置为<html>：

html,body {
    height:100%;
}

#div1 {
    height: 20%;
    background-color: red;
}

#div2 {
    height: 80%;
    background-color: blue;
}

<div id="div1"></div>
<div id="div2"></div>

Answer 3

使用此代码：

html,body {
 height:100%;
}

基本高度百分比

3 个答案: