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

Question

我花了很多时间试图找出如何创建类似 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>

Answer 1

只需按照该人在示例中所做的操作并使用 before 元素即可。

DEMO

CSS:

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