Question

我知道这与已经存在的一些问题相似，但不同之处在于它不是导致问题的主体背景，所以我迷失了。

问题在于，当您将视口缩小到小于内容然后向下滚动时，左侧的波浪线会停在视口底部最初的位置。棘手的部分是，当内容太长时，我希望左侧的波浪线与内容一起滚动。

相关的CSS看起来像这样：

body {
background: url('images/background.jpg');
margin: 0;
padding: 0;
min-width: 1000px;
}

#container {
width: 100%;
position: absolute;
top: 105px;
bottom: 0;
margin: 0;
padding: 0;
}

#sidebarbg {
background: url('images/chocolate.jpg');
width: 300px;
height: 100%;
position: fixed;
left: 0;
z-index: 11;
background-attachment:fixed;
}

#sidebar {
background: url('images/sidebar.png');
width: 300px;
height: 100%;
position: absolute;
left: 0;
z-index: 12;
}

#contentnest {
position: absolute;
top: 50px;
left: 365px;
right: 0;
z-index: 14;
}

#content {
background: url('images/contentbg.png');
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-khtml-border-radius: 30px;
padding: 20px;
border: #f062a4 3px solid;
width: 80%;
min-width: 350px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
line-height: 150%;
font-family: QuicksandBook, Tahoma, Arial, sans-serif;
color: #905131;
}

，HTML看起来像这样：

<body>
<div id="sidebarbg"></div>
<div id="sidebar"></div>
<div id="container">
<div id="contentnest">
<div id="content">
<! -- content goes here -->
</div>
</div>
</div>
</body>

我错过了什么？

Answer 1

在#sidebar中

尝试删除height:100%并添加bottom:-99999em

另一种方法是制作侧边栏position:fixed。

Answer 2

我能够将我的绝对容器的BG扩展到视口之外，将其添加到我的带有BG的div样式中。

min-height: 100%;
height: 100%;
overflow-y: scroll;

这将导致双滚动条，因此将其添加到您的体型

overflow-y: hidden;

div的背景在视口被切断

2 个答案: