Question

我因为一个令人心碎的人而强调，我可能会错过一些必不可少的，但很容易的事情。虽然我之前已多次这样做但它已经去了...现在错了。

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

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像素＆＃39;

Answer 1

是的，您还需要为该div设置100％的高度。否则它的高度是未知的，并且不能精确地获取100％的高度，并且不会相应地计算innerElement高度。

为确保您必须使用该div的高度100％。

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

.thisIsAStructureItem {
  height: 100%;
}

.innerElement {
  height: 17.5%;/* calc from it's parent div height i.e. thisIsAStructureItem*/
}

实际上，您要求浏览器根据未定义的值计算高度。由于这将等于空值，结果是浏览器什么都不做。

Answer 2

原始：http://jsfiddle.net/o0Lfyt0m
已更新：http://jsfiddle.net/o0Lfyt0m/1/（来自以下代码示例）

innerElement尝试显示为父元素的17.5％。问题是父元素没有定义的高度。作为计算17.5％undefined的后退，div的高度基本上是默认为＆＃34; auto＆＃34;并假设其内容的高度，这取决于字体大小，行高，填充等。

编辑：CSS的一个很好的功能是元素样式可以从它的父母那里继承。你可以添加一个结构类，它将保持它的父元素的高度，这似乎是你的意图。

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

＆＃13;

html, body {
    height: 100%;
    width: 100%;
}

.wrapper {
    height: 100%;
    width: 100%;
}

.struct {
  height: inherit;
  width: inherit;
}

.innerElement {
  height: 17.5%;
}

＆＃13;

<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>

＆＃13;

每个div都需要一个高度吗？

2 个答案: