1

这是一个典型的css布局，

.rel {
   background: brown;
   position: relative;
   width: 100px;
   height: 100px;
   top: 100%;
   display: inline-block;
}

我制作了这个小提琴来展示相对和绝对对top: 100%;.

在同一个小提琴中，单击第二个红色 div，并观察它的行为，就好像它被定位为 100% 向下一样。

这是奇怪还是什么？动画时的 div 正在top: 100%;考虑，但在正常情况下它什么也不做。

编辑

随着添加，

html, body {
   height: 100%;
}

将允许您使用，top: 100%;但是当元素本身不是时，为什么.animate();要考虑顶部？

4

2 回答 2

2

在您的实例中，如果您想工作，相对于窗口的高度，/height需要 100% 的a。bodyhtmltop

html, body { height:100%; } （例子）

给定当前示例，父元素body具有基于其包含的子元素定义的尺寸。由于子元素的高度为100px，这意味着bodythen 的高度也为100px，因为它们是其中唯一存在的元素。因此，top:100%对包含的元素绝对没有影响，因为这些元素决定了父元素的尺寸。

为了top:100%工作，必须直接定义父元素的高度，而不是基于子元素进行扩展。类似的东西top:222px 会起作用，因为这是顶部的绝对值。但是使用%基于值需要维度，因为100%0 也是 0。您可以将父级设置body为height:500px (example)，它会起作用。但是如果你想要它基于窗口的高度，那么body, html { height:100% }将是必需的。

至于为什么动画本身使用 jQuery 工作，这是因为px基于值用于移动 DOM 中的元素，而不是基于百分比的值。因此，这也适用于纯 CSS（如上所述）。看一下动画中的代码演示了这一点，这里是截图。如您所见，px值用于移动元素。唯一的区别是 jQuery 通过计算来计算窗口的高度。除此之外，jQuery 并没有做任何在纯 CSS 中无法实现的特殊功能。假设使用了值，您可以使用 CSS 动画执行完全相同的操作px……但这不再是问题，因为您现在知道设置父元素的高度，使您能够使用基于百分比的值。

于 2013-11-13T17:43:22.107 回答
0

尝试这个：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
于 2013-11-13T16:31:34.573 回答