Html 要向左扩展的侧边栏背景

我试图让左边的侧边栏把背景颜色扩大到左边，同时保持我的“布局”在页面中间。p> 说明：

我的问题是div.container使布局居中（这很好），但我似乎无法使我的边栏背景向左扩展左侧水平和垂直空间

在如何实现这一点上，有没有什么聪明的方法

目前为止，我有以下几点：

<div id="app" class="container">
    <div class="row">
        <div id="sidebar" class="col-md-3">
            <h2>Sidebar / Nav</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>

        <div id="main" class="col-md-9">
            <h1>Main Content</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</div>

请参见我当前的示例和问题：

检查是否可以帮助您

HTML

---

谢谢，但它似乎没有和我一样的问题，底部的一面被撕破了。

html {
    height: 100%;
}

body {
    background: url("http://j.eremy.net/examples/stretchy-sidebar/bg_body.gif") repeat scroll center top rgba(0, 0, 0, 0);
    height: 100%;
    margin: 0;
    padding: 0;
}

#app {
    height: 100%;
}

#sidebar {
    color: #fff;
    height: 100%;
}

#main {
    background: none repeat scroll 0 0 #d9cead;
    height: 100%;
}

<div class="outer">
 <div class="cont">
    <div class="left">Test</div>
  <div class="right">Right</div>
</div>

* {margin:0}
.cont {
  width: 940px;
  margin: 0 auto;
  background: #fff;
  position: relative;
  z-index: 2
}
.cont:after {
  content: " ";
  display: block;
  clear: both;
}
.left {
  width: 200px;
  float: left;
  min-height: 600px;
  background: red
}
.outer:before {
  content: " ";
  z-index: 1;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: red;
  width: 50%;
  height: 100%
}