::after 和 ::before 绝对定位的元素不会粘在 body 的最底部

Question

我要疯了！哈哈我试图将一张图片放在页面底部，但它仅在页面宽度较大时才有效...比如 1360 像素，但是当我将其缩小到 1206 像素或更小时，body图像被向上推，在底部创建一个填充，如下图所示（图像由绿色框表示）。

绿色图像使用此 CSS:

定位

    body::after {
    content: "";
    width: 556px;
    height: 767px;
    position: absolute;
    bottom: 0;
    right: 10%;
    display: block;
    background-image: url("imagens/ghost-dog.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}

还有一个透明度（这个紫色阴影）我使用其他属性添加，它也不会粘在底部。使用这个 CSS:

    body::before {
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

最后让我思绪万千的是 body 的背景，但它符合预期适合所有屏幕：

body {
    color: #fff;
    font-size: 15px;
    line-height: 21px;
    font-family: "comfortaa-regular";
    background-color: var(--cor-roxa);
    background-image: url("imagens/logo-bg.svg");
    background-repeat: repeat;
}

html, body {
    height: 100%;
}

我已经试过定位body relative，但是并没有解决问题。我不知道这是否重要，但我正在使用 bootstrap 并且我的 div 的组织方式如下图所示：

有什么建议吗？

Answer 1

没有任何例子来审查这是很难确定的原因。也就是说，立即想到的是带有边距的子元素溢出它的父容器推动 window 边界而不是它的父容器边界。

我会检查您的元素并切换任何边距以查看这是否有任何效果。

如果您将代码添加到 fiddle，我可以查看并在发现问题时更新它。

::after 和 ::before 绝对定位的元素不会粘在 body 的最底部

::after and ::before elements absolute positioned don't stick to very bottom of body

html

css

bootstrap-5