css - div 的背景在视口(viewport)处被截断-6ren

css - div 的背景在视口(viewport)处被截断

转载作者：行者123 更新时间：2023-11-28 14:27:14

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

网站位于 http://www.thesweet-spot.com/test77

问题是，当您将视口(viewport)缩小到小于内容然后向下滚动时，左侧的波浪线会停在视口(viewport)底部原来的位置。棘手的部分是当内容太长时，我想让左边的波浪线随着内容滚动。

相关的 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>

我错过了什么？

最佳答案

在 #sidebar 中尝试删除 height:100% 并添加 bottom:-99999em

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

关于css - div 的背景在视口(viewport)处被截断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7822924/