html - 颜色左右背景，而不是从中心

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 使用height : 100%. 这可能应该在需要时拉伸包装器，并带上其他列......理论上......

Answer 2

对于这种类型的功能，您可以使用display:table属性。

例如这样写：

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

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

检查这个http://jsfiddle.net/HuxCZ/

Answer 3

这是示例纯代码。您可以通过与此进行比较来更改您的 css

HTML

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

​</p>

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

演示http://jsfiddle.net/pV44s/1/

Answer 4

从您的内部 div 中删除float:left并添加min-heightdisplay:table-cell;

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

希望这会有所帮助