html - 另一个 div 内的 Div 框没有出现

Question

希望你今天过得愉快!我在放置 3 个信息框的地方创建了一个 div。当我用百分比设置宽度和高度时，这些框没有出现。但是如果我用像素设置它们，它们就会出现。我希望它们以百分比表示，因为我希望网站在访问的每台设备上都能完全响应。有什么建议吗？

HTML&CSS:

#info {
  height: 50%;
  background-color: red;
}

.infoBox {
  width: 20%;
  height: 35%;
  background-color: blue;
  float: left;
  margin: 0 1%;
}

<div id="info">

  <div class="infoBox" id="infoBox1">

  </div>

  <div class="infoBox" id="infoBox1">

  </div>

  <div class="infoBox" id="infoBox1">

  </div>

</div>

Answer 1

你的盒子有一个 height计算为' auto ' 因为 #info的 parent 没有 height明确指定。

https://www.w3.org/TR/CSS2/visudet.html#the-height-property

<percentage>

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.

通常，您设法从 html 到 body 一直继承视口(viewport)的高度到您的容器

html,
body {
  height: 100%;
}

#info {
  height: 50%;
  background-color: red;
}

.infoBox {
  width: 20%;
  height: 35%;
  background-color: blue;
  float: left;
  margin: 0 1%;
}

<div id="info">

  <div class="infoBox" id="infoBox1">

  </div>

  <div class="infoBox" id="infoBox2">

  </div>

  <div class="infoBox" id="infoBox3">

  </div>

</div>

注意

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.