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

Question

我的<div class="page">页面居中,我希望在此元素的左右边缘有两个背景图像.

我已经设置了.page::before和.page::after伪元素,它们似乎工作得很好,但背景图像重复到视觉视口的末尾,而不是整个页面.

我已经试过几件事情,用打position:...的div,或设定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%on伪元素就会引用视口的高度,因为它们是绝对定位的.