侧边栏的背景向左扩展

Question

我正在尝试让我的左侧边栏向左扩展其背景颜色，同时保持我的＆＃34;布局＆＃34;在页面中间。

插图：

我的问题是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>

和CSS：

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%;
}

请在此处查看我当前的示例和问题：http://jsfiddle.net/gaLc9/

Answer 1

检查this是否可以帮助您

HTML

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

CSS

* {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%
}