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

Question

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

我想也许是百分比，但它与导致问题的右侧列的关系..

Answer 1

You could use a long border and negative margins to achieve this.

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