Question

我正在尝试实现此处Jquery replacewith fade/animate所述的淡入和淡出效果，但我想避免其下面的内容上下移动。所以我定义了一个高度固定的容器。

.container {
  height: 475px;
}

如果我使用px设置容器的高度，则“以下内容”在动画过程中不会上下移动。

field1 = data.Field(lower=True)
field2 = data.Field(lower=True)
...
field1.build_vocab(train, dev)
field2.build_vocab(train, dev)

但是，如果我设置“ height：90％;”，那么它将。为什么？

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

Answer 1

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

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

Answer 2

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

如果示例中<body>中没有内容，则页面会折叠并且没有高度。

如果将<body>的高度设置为100％，则它仍然没有高度，因为其父<html>没有高度。但是，通过将<html>和<body>的高度设置为100％，您将填充视口（html的“父”）。

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