顏色左和右的背景，而從中心

Question

現在的佈局是這樣的

我想實現的就是這個

<style type="text/css"> 
     body { color: #4B5E6F; font-size: 11px; line-height: 1.8em; } 
     #main-content-wrapper { background: #F6F7F8; border-left: 1px solid #DBDFE2; border-right: 1px solid #DBDFE2; min-height: 400px; } 
     #content-left { float: left; width: 150px; min-height: 400px; background: #F6F7F8; } 
     #nav-left { list-style-image: none; margin: 0px; } 
     #nav-left li { margin: 6px 0px 6px 0px; } 
     #nav-left li .nav-parent { font-family: 'open_sans_extraboldregular'; text-transform: uppercase; color: #595F78; line-height: 22px; text-decoration: none; cursor: pointer; letter-spacing: 0px; margin: 0px 0px 0px 7px; font-size: 12px; } 
     #nav-left li .nav-sub { font-family: 'open_sansregular'; color: #595F78; line-height: 22px; text-decoration: none; cursor: pointer; letter-spacing: 0px; margin: 0px 0px 0px 5px; font-size: 11px; } 
     #content { float: left; border-left: 1px solid #DBDFE2; border-right: 1px solid #DBDFE2; min-height: 500px; width: 550px; padding: 10px; background: white; } 
     #content-right { float: left; width: 216px; padding: 10px; background: white; } 
     .nav-left-separator { background: url("resources/images/separator_menu.gif") repeat-x; height: 1px; display: block; margin: 0px 2px 0px 2px; } 
     .page-header { font-family: 'open_sansbold'; font-size: 16px; color: #8E354C; line-height: 22px; font-weight: normal; border-bottom: 1px solid #E4E7D4; margin-bottom: 15px; margin-top: 15px; } 
     ul { list-style-image: url('resources/images/fleche.gif'); margin: 4px 0px 0px 15px; } 
     ul li span { font-family: 'open_sansbold'; } 
    </style> 

<div id="main-content-wrapper"> 
      <div id="content-left"> 
       <ul id="nav-left"> 
        <li><a href="" class="nav-parent">Menu</a></li> 
        <li><span class="nav-left-separator"></span></li> 
        <li><a href="" class="nav-parent">Menu</a></li> 
        <li><span class="nav-left-separator"></span></li> 
        <li><a href="" class="nav-parent">Menu</a></li> 
        <li><a href="" class="nav-sub">Lorem</a></li> 
        <li><a href="" class="nav-sub">Lorem</a></li> 
        <li><a href="" class="nav-sub">Lorem</a></li> 
        <li><span class="nav-left-separator"></span></li> 
        <li><a href="" class="nav-parent">Menu</a></li> 
        <li><span class="nav-left-separator"></span></li> 
        <li><a href="" class="nav-parent">Menu</a></li> 
        <li><span class="nav-left-separator"></span></li> 
        <li><a href="" class="nav-parent">Menu</a></li> 
       </ul> 
     </div> 
      <div id="content"> 
       <div class="page-header">Lorem ipsum dolor sit amet</div>     
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
       when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into 
       electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
       and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </div> 
      <div id="content-right"> 
       <div class="page-header">Lorem ipsum</div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
       <div class="page-header">Lorem ipsum</div> 
       <ul> 
        <li><span>Overview</span></li> 
        <li><span>Overview</span></li> 
        <li><span>Overview</span></li> 
        <li><span>Overview</span></li> 
       </ul> 
       <div class="page-header">Lorem ipsum</div> 
       <ul> 
        <li><span>Overview</span></li> 
        <li><span>Overview</span></li> 
        <li><span>Overview</span></li> 
        <li><span>Overview</span></li> 
       </ul> 
     </div> 
    </div> 

我想要的背景如果中心內容向下延伸，則左側和右側將被着色而不是從中心着色，然後是左側和右側黑色圓形也需要用它們的顏色來着色。有什麼建議傢伙？無論如何感謝

Answer 1

對於這種類型的功能你可以使用顯示：表屬性。

例如寫這樣的：

div{display:table-cell;width:100px;background:red} 

.center{ 
    background:green; 
    width:200px; 
} 
.right{background:yellow;} 

檢查此http://jsfiddle.net/HuxCZ/

Answer 2

使內容欄div使用height : 100%。這應該可能在需要時拉伸包裝，取其他列...理論上...

Answer 3

下面是示例明碼。你可以通過這個

HTML比較改變你的CSS

<div id="container3"> 
    <div id="container2"> 
     <div id="container1"> 
      <div id="col1"> 
      test 

       <!-- Column one end --> 
      </div> 
      <div id="col2"> 
       Lorem ipsum dolor sit amet.................. 
       <!-- Column two end --> 
      </div> 
      <div id="col3"> 
       <!-- Column three start --> 
       dgh 

       <!-- Column three end --> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

#container3 { 
    clear:left; 
    float:left; 
    width:100%; 
    overflow:hidden; 
    background:#89ffa2; /* column 3 background colour */ 
} 
#container2 { 
    clear:left; 
    float:left; 
    width:100%; 
    position:relative; 
    right:33.333%; 
    background:#ffa7a7; /* column 2 background colour */ 
} 
#container1 { 
    float:left; 
    width:100%; 
    position:relative; 
    right:33.33%; 
    background:#fff689; /* column 1 background colour */ 
} 
#col1 { 
    float:left; 
    width:29.33%; 
    position:relative; 
    left:68.67%; 
    overflow:hidden; 
} 
#col2 { 
    float:left; 
    width:29.33%; 
    position:relative; 
    left:72.67%; 
    overflow:hidden; 
} 
#col3 { 
    float:left; 
    width:29.33%; 
    position:relative; 
    left:76.67%; 
    overflow:hidden; 
}​ 

DEMO http://jsfiddle.net/pV44s/1/

Answer 4

從你內心的div刪除float:left和min-height並添加display:table-cell;

http://jsfiddle.net/N8mDD/2/

希望這將有助於