html - 绝对 div 的背景图像在滚动时被截断

Question

我知道还有其他类似的帖子，但我似乎找不到确切的答案...所以...

我想创建一个 jquery 幻灯片，其中背景图像相互淡入淡出，因此我没有在 body 标记中放置背景图像，而是创建了一个填充整个屏幕并放置其他元素的 div，例如菜单，在顶部。但是当我使视口(viewport)小于菜单的高度并向下滚动时，我会看到一个背景色 block 在我的图像上向上移动。我已经尝试了我能想到的一切来解决这个问题，但我完全卡住了。

这是一个简化版本。红色 block 是图像所在的位置，黑色是背景色，菜单以灰色覆盖。 CSS:

body, html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    background-color: #000000;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 1em;
    line-height: 1em;
    color: #9E9E9E;
    position: relative;
}
body {
    text-align: center;
}
* {padding: 0px; margin: 0px}
#wrap {
    width: 100%;
    min-height: 100%;
    background-color: #900;
    position: absolute;
    z-index: 1000;
}
#menu_wrap {
    width: 390px;
    min-height: 100%;
    background-color: #656262;
    position: absolute;
    z-index: 9999;
    background: rgb(101, 98, 98);
    background: rgba(101, 98, 98, 0.9);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
}
#menu_wrap #menu_content {
    padding: 40px;
    height: 500px;
}

HTML:

<div id="wrap"></div>

<div id="menu_wrap">
    <div id="menu_content">Menu content goes here - it could be any height.</div>Menu extends to here.
</div>

如有任何帮助，我们将不胜感激。可能是我刚刚错过了一些非常简单的事情，但我觉得我正在用头撞砖墙。谢谢。

Answer 1

这是一个 jsfiddle 链接，我认为它可以满足您的需求。

http://jsfiddle.net/Alfalfamale/dCgRW/1/

您的设置的问题是 wrap div min height (100%) 将始终是其父级 100% 的高度，即 body，它始终只是视口(viewport)大小。

为了解决这个问题，我将菜单移动到 wrap 内并使其 float 而不是绝对定位。这样，菜单将保持文档的“流入”状态，并占用 #wrap 中的空间。其次，我们将 overflow: hidden 添加到包装中，实质上是清除左侧菜单。

我可能留下了一些在 float 设置中不是必需的样式，我相信你可以自己挑选出来:)