为什么HTML 5不支持以％为单位设置iframe高度？

Question

In HTML 4.01, the height could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.

为什么做出这个决定？是否有人担心设置height: 100%;会产生一些负面影响？这不像人们不能设置height: 100000px;（显然，不是一个好的工作）。

是否有某种参考可以告诉我这背后的推理？

我不确定这个论坛会被视为一个好问题，如果您觉得这个问题不合适，请推荐一个更好的地方询问。

我想有人可能会这样说，在HTML 4.01中将高度作为百分比应用于iframe有什么缺点？ （除了HTML 4.01已经过时的事实）

Answer 1

您正在引用的“丢弃支持”仅通过使用内联height属性。这被删除是因为内联属性混合了内容和样式，这是不好的做法;您的标记应与其演示文稿完全分开。

<iframe>元素确实可以占据其父级高度的100%，尽管默认情况下它们是inline元素。

重要的是要记住，在百分比驱动值下，这些值与直接父母相关。如果直接父母没有height，该元素将不会自动从祖父母（或更高）继承他们的height：

div.outer {
  background: cyan;
  height: 300px;
}

iframe {
  border: 5px solid red;
  height: calc(100% - 10px);
}

<div class="outer">
  <div class="inner">
    <iframe></iframe>
  </div>
</div>

这可以通过确保具有固定height的元素和具有基于百分比的height的目标元素之间的每个元素都具有height: 100%设置来解决：

div.outer {
  background: cyan;
  height: 300px;
}

div.inner {
  height: 100%;
}

iframe {
  border: 5px solid red;
  height: calc(100% - 10px);
}

<div class="outer">
  <div class="inner">
    <iframe></iframe>
  </div>
</div>

Answer 2

HTML5 Section 4.7.19. Dimension attributes说

作者要求：img，iframe，embed，object，video等的width和height属性，当它们的type属性处于Image Button状态时，可以指定输入元素以给出元素的可视内容的维度（相对于输出介质的标称方向的宽度和高度，以CSS像素表示。如果指定了属性，则必须具有有效非负整数的值。

[...]

如果所讨论的资源不具有固有宽度和固有高度，则必须省略这两个属性。

也就是说，当iframe中的资源具有固有宽度和固有高度时，仅以像素为单位使用高度和宽度才有效。高度和宽度应反映这些内在尺寸。因此，以百分比来指定它们是没有意义的，因为内在维度不是百分比。

百分比总是只是造型。所以它们应该在CSS中指定，而不是HTML。