Html 为什么使用百分比与像素来定义高度时会有差异？

我试图实现这里提到的淡入淡出效果，但我想避免下面的内容上下移动。所以我定义了一个具有固定高度的容器

<div class="container">
  <div id="foo"></div>
</div>
<h1>content below</h1>

但如果我设置“高度：90%”，那么它会。为什么?

---

我更喜欢使用百分比，那么在这种情况下如何使用呢？

像素是一个绝对的度量单位。百分比是相对于其他值的

每个都有有效的用例，两者都不是“更好”

---

参考资料：

百分比是相对的，像素是绝对的。计算机知道什么是400像素。然而，当测量是相对的时，最终绝对输出必须与其他测量有关系。400px是800px的50%

例如，如果您的

中没有内容，则页面将折叠，并且没有高度

如果将

的高度设置为100%，它仍然没有高度，因为其父级

没有高度。但是，通过将

和

的高度设置为100%，您将填充视口（html的“父视图”）

---

这适用于其他块元素，如div。

我的意思是：给定我的问题，当窗口大小不变时，“height:90%”是否为固定值？我不是问一般意义上的差异。@user180574

CSS：为什么使用百分比与px来定义高度时会有差异？

它不是固定值，当您有固定高度或内容的父容器时，它与屏幕百分比的变化会起作用。在您的情况下，内容为“无”，因此“无”的百分比将变成“无”。但是固定高度的作用是，它在px中是绝对高度。我忘了提到我有“html，body{height:100%；width:100%；}”。我会把所有的东西放在一起，做更多的测试。另一件事，我也使用引导，所以它可能会复杂化。我不知道。我试试看。谢谢。我发现在使用引导时，应该使用“vh”作为%。

.container {
  height: 475px;
}