为什么我看不到红色的 div 框？答案

【问题标题】：Why can't I see a red div box?为什么我看不到红色的 div 框？
【发布时间】：2017-08-22 08:36:15
【问题描述】：

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不是继承了浏览器窗口的宽高吗？嗯？

【问题讨论】：

不，它的高度取自身体高度，而不是浏览器窗口。
也许你应该使用vh 和vw 来代替%。 20vh 是视口高度的 20%，而不是父元素。

标签： html css element background-color

【解决方案1】：

您需要添加您的 div 父母的 width 和 height。这是因为该元素从正文中获取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>

【讨论】：

你能解释你的修改以及为什么你做了这些吗？
为什么不直接使用 vh 和 vw 呢？为什么要使用 %？有什么区别吗？
vh 和 vw 是视口的百分比，而 "normal" % 是父元素的百分比
@CaTLard Arkej 的解决方案兼容更多浏览器，包括还没有vh 和vw 的旧浏览器。

【解决方案2】：

您可以使用vh 和vw 代替%。

vh 是视口高度的百分比。 vw 是视口宽度的百分比。

body {
  background-color: teal;
}

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

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

另一方面，您可以使用%，但如果您这样做，您需要将html 和body 设置为height: 100%; width: 100%;，然后margin: 0; 以删除导致滚动条的额外空间。

body, html {
  background-color: teal;
  height: 100%;
  width: 100%;
  margin: 0;
}

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

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

【讨论】：

为什么不使用%？在什么情况下您使用 % 而不是 vh 和 vw？

【解决方案3】：

这里的问题是你没有设置body/html的宽度和高度，所以当给width: 20%; width: 20%;时它不会显示。（占什么的 20%？）

添加body/html的宽度和高度

body,html {
  background-color: teal;
  width: 100%;
  height: 100%;
}

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

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

这是有内容的

如果您添加内容，它将显示。

 body {
      background-color: teal;
    }

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

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

您尚未将 vh 或 vw 指定为 div 的宽度和高度。

 body {
      background-color: teal;
    }

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

    }

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

解决方案：

使用 vh vw 为 div 指定宽度和高度，或将内容添加到红色框或设置 body/html 宽度和高度。

【讨论】：

【解决方案4】：

gridBox 从 body 获取高度，在这种情况下为 null。所以试试

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

或者只给出gridBox的像素高度。

.gridbox {
   height : 100px;
}

【讨论】：

【解决方案5】：

您可以删除 position: relative;，它会完成这项工作（目前）

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

【讨论】：

【解决方案6】：

为body和html添加css宽度/高度

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

【讨论】：