`div :: after {content：“”;高度：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;
}

为什么::高度之后：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的高度的原因伪元素从中获取实际高度。