可能的重复没有帮助
我知道关于这个话题有很多答案，但它们都没有帮助我，我花了几天时间 这个问题。 90%的答案和书籍都给出了这个背景技巧，但这对我没有帮助。
我的代码 - Plunker
HTML
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li><a href="#">ANALYTICS</a></li>
<li><a href="#">STYLES</a></li>
<li><a href="#">VOTERS</a></li>
<li><a href="#">GET STARTED</a></li>
<li><a href="#">UPDATE</a></li>
</ul>
</div>
<div class="content">
<p>Content</p>
</div>
CSS
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}
.sidebar{
width: 5%;
display: inline;
height: 100%;
float: left;
background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
font-size: 0.5em;
position: absolute;
bottom: 0;
left: 0;
}
现在我的布局如下所示：
我希望它看起来像这样：
我跟着这个guide提供在可能重复但这没有帮助
我想这是因为我正在使用floats and fluid layout.
如何在保留列的同时扩展列fluid layout和float定位。
我已经更新了你的代码。看看它Plunker.
起初尝试不使用absolute or relative如果不需要的话。
第二，在你的情况下，通过给予display: inline and float: left样式，做同样的事情，所以只使用后一种就足够了。
此外，我已经设置了height of HTML and BODY标签为 100%，并对sidebar and content DIVs，所以他们会fill the parent's (body） 高度。
最后，你的问题之一是repeat-y的价值background财产。它没有在 x 轴上重复，因此您看不到实际大小DIVs。我刚刚将其设置为repeat代替repeat-y.