css - 如何创建背景延伸到屏幕最左侧而不是内容延伸的列？

我花了很多时间试图弄清楚如何创建类似于to this的布局，其中页面内容受容器元素的宽度限制，但是左侧的列的背景一直延伸到最左侧用户屏幕的位置（示例中为黄色）。

我正在尝试使用Bootstrap进行此操作，但是由于容器元素包含页面的内容以及背景，因此这似乎是不可能的。

这是到目前为止的JSFiddle。

结构的一些示例代码：

<div class="row">
    <div class="container">
        <div class="col-xs-6 left-one">
            This one's background needs to stretch to the far left, on large screens.
        </div>
        <div class="col-xs-6 right-one">
            This one's background can be that of the body
        </div>
    </div>
</div>

<div class="some-content">
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
    </div>
</div>

如果有人能为我解决这个奥秘，我们将不胜感激。

这是完整的代码：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

body{
    background: #eee;
}

.left-one{
    background: yellow;
    height: 500px;
    padding-top: 20px;
}

.right-one{
    background: #eee;
    height: 500px;
    padding-top: 20px;
}

.some-content{
    background: lightslategray;
    padding: 20px 0;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row">
    <div class="container">
        <div class="col-xs-6 left-one">
            This one's background needs to stretch to the far left, on large screens.
        </div>
        <div class="col-xs-6 right-one">
            This one's background can be that of the body
        </div>
    </div>
</div>

<div class="some-content">
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
    </div>
</div>

最佳答案

只需执行此人在示例中所做的操作，然后使用before元素即可。

DEMO

CSS：

.left-one:before{
    background: yellow;
    bottom: 0;
    content: "";
    position: absolute;
    right: 100%;
    top: 0;
    width: 9999px;
}