左侧边栏有扩展的水平背景？

Question

是否可以使用仅通过背景图像/颜色连接到浏览器左侧的侧边栏，但无论浏览器大小如何，内容都保留在右侧，与其他内容保持相同的距离内容块居中？

我认为可能是百分比，但它与右栏的关系导致了问题..

Answer 1

您可以使用长边框和负边距来实现此目的。

http://jsfiddle.net/davidja/TWdXe/2/

.outer {
    height:200px;
    position:relative;
    width:650px;       // make your fixed container
    margin-left:auto;  // center it
    margin-right:auto; // center it
}
.inner {
    height:200px;
    background:red;
    width:200px;
    display:inline-block;
    border-left: solid 1000px red; // long border on the left  
     margin-left: -1000px;         // negative margin to keep the layout 
}
.foo {
    width:400px;
    background:orange;
    display:inline-block;
    border-right: solid 1000px orange; // long border on the right - optional
    margin-right: -1000px;             // negative margin to keep the layout -  optional 
}


body {overflow:hidden;}  //Resolves horizontal scrollbar