如何在页面左侧添加背景颜色？

Question

我想在页面左侧添加背景颜色。我有主要的div，它居中并且有固定的宽度。我尝试了背景图片，但它不适合我，因为我在页面上有无限滚动。这张照片显示了我想要实现的目标：

这是我的方法：

<div class="row">
    <div class="left"></div>
    <div class="container">
        my custom HTML code
    </div>
</div>

CSS

.container {width: 1000px; margin: 0 auto}
.left {background-color: red; position: absolute; height: 100%; width:100%; top: 0px; left: -100%;  }

Answer 1

Check out the fiddle here

<强> HTML

<div class="row">
    <div class="left">
        your left code
    </div>
    <div class="container">
        your custom HTML code
    </div>
</div>

<强> CSS

.container {
    background-color: gray;
    width: 80%;
    margin: 0 auto;
    float: left;
}

.left { 
    background-color: red;
    float: left;
    width: 20%;
}

Answer 2

如果您希望容器位于中央和左侧，请点击此处 http://jsfiddle.net/V6JaX/

.row { width: 100%; position: relative; }
.left { width: 20%; height: 100%; top: 0; left: 0; position: absolute; background: red; }
.container { width: 600px; margin: 0 auto; background: #FFF; }