我正在尝试使用内容容器实现固定图像背景（这会在一分钟内发生变化），该内容容器从背景页脚后面向上滚动，因此将背景图像从页脚图像中分离出来或者具有重复的页脚图像，然后，一旦内容容器清除页脚图像并与目标帖子对齐（如下面的链接所示），我希望背景和页脚一起滚动显示页脚上的信息。为了解释我的意思的背景我已经添加了一些图片（通过imageshack，因为我是新的堆栈），我认为这将有助于说明它：
http://img18.imageshack.us/img18/94/b87i.png
HTML
<body
<div class="container-fluid">
<div id="content" style="background: #AAA;">
<div id ="sidebar">
<div id="sidenavbar">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs ul-menu">
<li class="side-menu1 active"><a href="#lA" data-toggle="tab">Home <i class="pull-right icon-home"></i></a></li>
<li class="side-menu3"><a href="#lC" data-toggle="tab">Time <i class="pull-right icon-time"></i></a></li>
</ul>
<div class="sidebar-tab-content tab-content">
<div class="tab-pane active" id="lA">
<div class="tab-content-wrapper">
<div class="side-header">
<h2>HEADER</h2>
</div>
<div class="side-container">
<h2>MENU 1</h2>
<p>Quisque nec venenatis eros, sed cursus quam. Vestibulum dignissim cursus diam sed malesuada. Aliquam erat volutpat. Fusce consequat faucibus eros, eu congue massa. Nullam quam odio, mattis tincidunt ullamcorper vel, bibendum id lorem. In dignissim suscipit bibendum. Mauris porttitor libero vel tortor sodales, a congue ipsum iaculis. Morbi vulputate ipsum dictum eleifend molestie. Nulla facilisi. Nulla urna sem, fermentum eu purus non, placerat cursus eros. Sed vitae consectetur mauris, dignissim dictum quam. Morbi iaculis tincidunt lorem, id sodales nulla blandit nec. Integer hendrerit diam eget elit molestie, vitae laoreet erat malesuada.
</p>
</div>
<div class="side-footer">
<h2>FOOTER</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p>FOOTER.</p>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#push, #footer {
height: 60px;
}
.container-fluid {
width: 100%;
height: 100%;
}
#content {
position: absolute;
width: 100%;
bottom: 60px;
top: 42px;
right: 0px;
left: 0px;
padding: 0px;
}
#sidebar {
position:absolute;
width:300px;
height:100%;
}
#sidebar .ul-menu {
margin:0px;
}
#sidenavbar .tabs-left>.nav-tabs>li>a{
margin: 0px;
min-width: 30px;
width: 70px;
-webkit-border-radius: 0px 0 0 0px;
-moz-border-radius: 0px 0 0 0px;
border-radius: 0px 0 0 0px;
border: 0px;
}
.sidebar-tab-content {
background: #FFF;
position: absolute;
height: 100%;
left: 94px;
width:100%;
}
#sidenavbar .tabs-left>.nav-tabs {
border: 0px;
}
#footer {
color: #FFF;
background-color: #666;
}
.side-header, .side-footer {
background: #AAF;
}
.side-header {
position: fixed;
top: 0px;
right: 0px;
left: 0px;
}
.side-container {
position: absolute;
bottom: 40px;
top: 40px;
overflow-y: auto;
}
.side-footer {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
}
h2 {
margin: 0px;
}
这是我要去的地方的小提琴：
http://jsfiddle.net/crispey/w6LP4/1/
非常感谢，希望有人能够提供帮助，
C
所以，经过几天我的Q待命（不知道为什么现在但不要担心？），以及看着我的查询的奇怪的人，我决定尝试使用滚动容器，因为我的小提琴在这里：
（没有足够的代表另一个链接，所以试试这个jsfiddle.net/crispey/vE6nv /）
无论哪种方式，这里都是标记：
<div class="textwrap">
<h1>Crispey Bears Sports Bar</h1>
<h3>Purveyors of the finest free sports streams</h3>
<hr class="style-seven">
<h4>Donec molestie molestie nulla vel placerat. Ut viverra in massa porttitor viverra. Aliquam erat volutpat. Nulla diam nisl, euismod at erat eu, fringilla laoreet tellus. Praesent ut nulla quam. Ut vel elementum tortor, nec facilisis purus. Aenean dui odio, euismod adipiscing nisl eget, mollis ultrices dui.</h4>
<br><br>
<br><br>
<hr class="line-four">
<br><br>
<h4><strong><em>IMPORTANT MESSAGE TO PARENTS! </em></strong> Donec molestie molestie nulla vel placerat. Ut viverra in massa porttitor viverra. Aliquam erat volutpat. Nulla diam nisl, euismod at erat eu, fringilla laoreet tellus. Praesent ut nulla quam. Ut vel elementum tortor, nec facilisis purus. Aenean dui odio, euismod adipiscing nisl eget, mollis ultrices dui.</h4>
<hr class="line-two">
<h5><strong><em>Disclaimer</em></strong> Donec molestie molestie nulla vel placerat. Ut viverra in massa porttitor viverra. Aliquam erat volutpat. Nulla diam nisl, euismod at erat eu, fringilla laoreet tellus. Praesent ut nulla quam. Ut vel elementum tortor, nec facilisis purus. Aenean dui odio, euismod adipiscing nisl eget, mollis ultrices dui.</em>
<strong><em>Donec molestie molestie nulla vel placerat. Ut viverra in massa porttitor viverra. Aliquam erat volutpat. Nulla diam nisl, euismod at erat eu, fringilla laoreet tellus. Praesent ut nulla quam. Ut vel elementum tortor, nec facilisis purus. Aenean dui odio, euismod adipiscing nisl eget, mollis ultrices dui.</em></strong></h5>
</div>
css - 我留下的额外风格
textwrap {
width: 838px;
height:430px !important;
display: inline-block;
/* needed make it float in the middle of body */
margin: 20px auto 108px;
margin-left:252px;
padding: 20px 30px 0px 30px;
float: left;
text-justify: left;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border: 2px solid #480a0a;
padding-bottom: px;
-moz-box-shadow: 0 0 30px 5px #333;
-webkit-box-shadow: 0 0 30px 5px #333;
box-shadow: 0 0 30px 5px #333;
background: #a8a8a8;
background: -moz-linear-gradient(#d9d9d9, #a8a8a8);
background: -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#a8a8a8));
background: -webkit-linear-gradient(#d9d9d9, #a8a8a8);
background: -o-linear-gradient(#d9d9d9, #a8a8a8);
background: -ms-linear-gradient(#d9d9d9, #a8a8a8);
background: linear-gradient(#d9d9d9, #a8a8a8);
overflow:auto;
}
.textwrap h1 {
font-size: 30px;
text-align:left;
float: right;
color: #612b2b;
background-color: rgba(155, 155, 155, 0.5);
text-shadow: 1px 1.6px 1px rgba(224, 224, 224, 1);
font: bold 3.3em/1.5'BebasNeueRegular', trebuchet MS, Arial, Helvetica;
-moz-box-shadow: 0 2px 3px 2px rgba(0, 0, 0, .4) inset;
-webkit-box-shadow: 0 2px 3px 3px rgba(0, 0, 0, .4) inset;
box-shadow: 0 2px 3px 3px rgba(0, 0, 0, .4) inset;
margin-right: 176px;
padding-top:10px;
padding-left: 10px;
padding-right:10px;
}
hr.style-seven {
height: 30px;
margin-top:-21px;
margin-bottom:10px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr.style-seven:before {
/* Not really supposed to work, but does */
display: block;
content:"";
height: 30px;
margin-top: -51px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}
.textwrap h2 {
font-size:20px;
text-align:left;
float:left;
clear:left;
color: #333;
text-shadow: 1px 1.6px 1px rgba(224, 224, 224, 1);
font: normal 2.2em/2'trebuchet MS', Arial, Helvetica;
}
.textwrap h3 {
font-size:18px;
text-align:center;
float:center;
clear:right;
color: #333;
text-shadow: 1px 1.6px 1px rgba(224, 224, 224, 1);
font: bold 2.2em/2 Arial, Helvetica;
}
.textwrap p {
font-size:16px;
text-align: justify;
float:left;
color: #333;
text-shadow: 1px 1.6px 1px rgba(224, 224, 224, 1);
font: normal'trebuchet MS', Arial, Helvetica;
margin-top:-20px;
}
.textwrap h4 {
margin: -30px auto 0;
color:#403f3f;
font-size:18px;
text-align:justify;
float:left;
color: #333;
text-shadow: 1px 1.6px 1px rgba(224, 224, 224, 1);
font:'trebuchet MS', Arial, Helvetica;
font-weight:normal;
}
hr.line-one {
position:relative;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
margin:-1px 0px -20px 00px;
}
hr.line-two {
position:relative;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
margin:100px 0px -20px 00px;
}
hr.line-three {
position:relative;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
margin:50px 0px -20px 00px;
}
hr.line-four {
position:relative;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
margin:20px 0px 20px 00px;
padding: 0px 0 0 0;
}
.textwrap h5 {
color:#403f3f;
font-size:12px;
text-align:justify;
float:left;
color: #333;
text-shadow: 1px 1.6px 1px rgba(224, 224, 224, 1);
font: normal'trebuchet MS', Arial, Helvetica;
margin-top:60px;
}
如果有人可以花时间，或者至少这个问题被取消，我仍然会喜欢我的第一个问题的解决方案，这样更多的人可以查看它。
小心一切，再次感谢，v赞赏
C