为什么我看不到红色的div盒子？

Question

body {
  background-color: teal;
}

.gridBox {
  position: relative;
  display: block;
  height: 20%;
  width: 20%;
  background-color: red;
}

<div class="gridBox">
  <div id="grid"> </div>
</div>

我的.gridBox div有什么问题？当我将其设置为像素时,我可以看到它.但百分比不起作用.因为它是body的子元素,所以.gridBox不会继承浏览器窗口的宽度和高度吗？咦？

Answer 1

您需要添加width和height您的div的父母.这是因为这个元素height,并width从身体,然后HTML -这是未设置.

html, body {
  width: 100%;
  height: 100%;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: teal;
}

.gridBox {
  display: block;
  height: 20%;
  width: 20%;
  background-color: red;
}

<div class="gridBox">
  <div id="grid"> </div>
</div>