側邊欄向左擴展的背景

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