javascript - 我需要一个 div 从页面右侧的 0 自动边距 div 的右侧填充

Question

我有一个 950 像素的主要内容 div，自动边距为 0，所以它居中。它有透明的内容，所以不能有背景颜色，但我需要左右边距有背景颜色。是否有可能将一个 div 绝对放置在 div 的右侧并延伸到窗口的末尾？我可以在左侧通过给它一个负的绝对值来做到这一点，但在右侧它会滚动到 div 的末尾。

.mainwrapper {width:950px; margin:0 auto; height:800px; position:relative;}
.leftmargin {height:800px;width:1000px;position:absolute;top:0px;left:-1000px;}
.rightmargin {height:800px;width:1000px;position:absolute;top:0px;left:950px;}

HTML
<div class="mainwrapper">
<div class="leftmargin"></div>
<div class="rightmargin"></div>
</div>

是否有简单的方法或仅使用 javascript？

Answer 1

这应该不难解决，但您需要访问 .mainwrapper 的父级。

HTML:

<div class="outer">
    <div class="mainwrapper">
        <div class="leftmargin"></div>
        <div class="rightmargin"></div>
    </div>
</div>

CSS:

.outer {
    overflow-x: hidden;
}
.mainwrapper {
    width:950px;
    margin:0 auto;
    height:800px;
    position:relative;
}
.leftmargin {
    height:100%;
    width:99999px;
    position:absolute;
    left:100%;
}
.rightmargin {
    height:100%;
    width:99999px;
    position:absolute;
    right:100%;
}