`div::after {content: ""; height: 100%}` 仅在 `div {position: absolute;}` 时有效？

Question

简短的问题：

div::after {content: ""; display: block; height: 100%;} 是否仅在 div {position: absolute;} 时有效？

height: 100%也是指相关div标签的高度吗？

说明：

我试图让 div 能够过度滚动一页，即使它到达底部。所以我使用了以下css：

div::after {
    content: "";
    display: block;
    height: 100%;
}
div {
    position: absolute;
    top: 0;
    bottom: 0;
}

为什么 ::after height: 100% 仅在 div 具有绝对定位时有效？

有没有更好的解决方案？因为我不喜欢在没必要的时候加绝对定位。

更新 1：

我使用 Chrome 27

Answer 1

height: 100% 属性（或任何百分比值）needs a parent element with some definition of actual height to work。该高度定义本身可以是height 属性设置（但不是 min 或max 版本），或者它可以（如您的情况）由position: absolute您还通过设置top 和bottom 属性定义了高度。除了使用 javascript 之外，这些是您的两个选项（并且 javascript 只能帮助阅读和设置 div 的高度，以便 ::after 可以拾取它，因为 javascript 不能影响 ::after 伪- 直接元素）。

所以::after 元素将div 作为其父元素，这就是为什么需要明确设置div 的高度以便::after 伪元素拾取实际从它的高度。