html - 每个 div 都需要设置高度吗？

Question

我因为精神 split 症而感到压力很大，我可能错过了一些重要但简单的事情..虽然我以前做过很多次..但现在出了问题。

所以我正在创建一个网络应用程序，我的出发点始终是

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

我的一些内部元素有一个以百分比和一些以像素为单位的设置高度。 但是，为了在我的代码中有一些结构，我设置了没有设置高度的 div。让我们设置以下情况。

HTML

<div class="wrapper">
  <div class="thisIsAStructureItem">
    <div class="innerElement">
      And just some untagged piece of text
    </div>
  </div>
</div>

CSS

.wrapper {
  height:100%;
  width:100%;
}

.thisIsAStructureItem {
/* nothing, not even height */
}

.innerElement {
  height: 17.5%;
}

但在任何编辑器或浏览器中，因为我没有在第二个元素上设置特定的 (%/px) 高度，所以它显示为 0px，包括所有内部元素。

尽管这可能很愚蠢..我做错了什么？

更新:查看此 JSFiddle

这种情况使它看起来有必要设置高度，因此我的标题。随意调整到更合适的东西

上述情况是待建情况的复制品，使用精确像素(在上述部分)不是一种选择。请不要建议“使用 X 像素”。

Answer 1

• 原创:http://jsfiddle.net/o0Lfyt0m
• 更新:http://jsfiddle.net/o0Lfyt0m/1/ (来自下面的代码示例)

innerElement 试图显示为父元素高度的 17.5%。问题是父元素没有定义高度。作为计算未定义 17.5% 的回退，div 的高度基本上默认为“自动”并假设其内容的高度，这基于字体大小、行高、填充等。

编辑:CSS 的一个很好的特性是元素样式可以从它的父元素继承。您可以添加一个结构类，它将继承其父元素的高度，这似乎是您的意图。

您甚至可以将此类添加到 body 元素，因为它的高度和宽度与 html 相同...只是不确定 HTML 元素是否可以在所有浏览器中设置样式，所以我没有这样做。

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

.wrapper {
    height: 100%;
    width: 100%;
}

.struct {
  height: inherit;
  width: inherit;
}

.innerElement {
  height: 17.5%;
}

<div class="wrapper">
  <div class="struct"> <!-- .struct inherits height/width from .wrapper -->
    <div class="innerElement"> <!-- height calculated based on .wrapper -->
      And just some untagged piece of text
    </div>
  </div>
</div>