css - 做 `div::after {content: ""; 高度 : 100% }` only works when ` div {position: absolute;}`?

Question

小问题:

div::after {content: "";显示: 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%属性(property)(或任何百分比值)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伪元素从中获取实际高度。