Html 绝对div的背景图像在卷轴上被切断

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

我想创建一个jquery幻灯片，其中背景图像相互淡入，因此，我不是将背景图像放在body标记中，而是创建一个div，填充整个屏幕，并将其他元素（如菜单）放在顶部。但是，当我使视口小于菜单的高度并向下滚动时，我会看到一个背景色的块在我的图像上向上移动。我已经想尽一切办法来解决这个问题，但我完全被卡住了

这是一个简化的版本。红色块为图像所在位置，黑色为背景色，菜单以灰色覆盖。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:

菜单内容在这里-它可以是任何高度。菜单扩展到这里。

---

任何帮助都将不胜感激。可能是我错过了一些非常简单的事情，但我觉得我的头撞到了砖墙上。谢谢。

这里有一个JSFIDLE链接，我想它能满足您的需求

设置中的问题是，“包裹div最小高度”（100%）始终是其父对象的高度（100%），即主体，始终仅为视口大小

为了解决这个问题，我将菜单移到了wrap中，并使其浮动，而不是绝对定位。这样，菜单将保持文档的“流动”，并在

#wrap

中占用空间。其次，我们在包装中添加了

overflow:hidden

，基本上清除了左侧菜单

---

我可能留下了一些在浮动设置中不重要的样式，我相信您可以自己选择：）

是否可以使用位置：固定在#包装上？完成了！我知道这将是一件很简单的事情——多棒的明星啊。谢谢。谢谢你的回答——这真的很有帮助，但我认为斯派尔帮了我的忙。

<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>