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

您需要添加div父母的width和height。这是因为此元素从正文中获取height和width，然后是未设置的html。

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

＆＃13;

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: teal;
}

.gridBox {
  display: block;
  height: 20%;
  width: 20%;
  background-color: red;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

body, html {
  background-color: teal;
  height: 100%;
  width: 100%;
  margin: 0;
}

.gridBox {
  display: block;
  height: 20%;
  width: 20%;
  background-color: red;
}

＆＃13;

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

＆＃13;

Answer 3

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

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

或者只为gridBox提供像素高度。

.gridbox {
   height : 100px;
}

Answer 4

这里的问题是您没有设置body/html的宽度和高度，因此在提供width: 20%; width: 20%;时它不显示。（20％的是什么？）

添加宽度＆amp;身高/ html

＆＃13;

body,html {
  background-color: teal;
  width: 100%;
  height: 100%;
}

.gridBox {
  position: relative;
  display: block;
  height: 20%;
  width: 20%;
  background-color: red;
}

＆＃13;

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

＆＃13;

这是内容

如果您添加内容，则会显示。

＆＃13;

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

＆＃13;

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

＆＃13;

你没有给vh或vw宽度＆amp;高度到div。

＆＃13;

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

＆＃13;

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

＆＃13;

<强>解决方案：

使用vh vw为div赋予宽度和高度，或者将内容添加到红色框或设置body / html width＆amp;高度。

Answer 5

你可以删除position: relative;，它将完成这项工作（现在）

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

Answer 6

为body和html添加css width / height

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

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

6 个答案: