延伸到页面高度的:: after和:: before伪元素的背景图像

Question

我有一个<div class="page">以我的页面为中心，我想在此元素的左右边缘放两个背景图像。

我已经设置了.page::before和.page::after伪元素，它们看起来很不错，但是背景图像会在视觉视口的末端而不是整个页面重复出现。

我尝试了几件事，使用div的position:...或将height: 100%设置height: 100%设置为html和/或body但无济于事。

我在这里做了一个JsFiddle演示来说明问题。 理想情况下，我不希望弄乱html标记。

有任何想法吗？

编辑 ：在此处包括标记和CSS，以供将来参考。

HTML ：

<div class="page">__long content here__</div>

CSS

.page {
    background-color: white;
    width: 400px;
    margin: 0 auto;
    padding: 1em;
}

.page::before {
    content: '';
    background-image: url(__some background image__);
    position: absolute;
    width: 94px;
    height: 100%;
    top: 0;
    margin-left: -100px;
}

.page::after {
    content: '';
    background-image: url(__some background image__);
    position: absolute;
    width: 94px;
    height: 100%;
    top: 0;
    margin-left: 995px;
}

Answer 1

定位.page相对似乎有效 ：

.page {
    position: relative;
    background-color: white;
    width: 400px;
    margin: 0 auto;
    padding: 1em;
}

如果没有它，那么height: 100%在其伪元素上的height: 100%是指视口的高度，因为它们是绝对放置的。