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

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