html - 侧边栏背景向左展开

Question

我试图让我的左侧边栏将其背景色向左扩展，同时将我的“布局”保持在页面中间。

插图:

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