绝对div的背景图像在滚动切断

时间:2012-11-12 14:52:52

标签: html css

我知道还有其他帖子就像这个,但我似乎找不到确切答案......所以......

我想创建一个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:

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

非常感谢任何帮助。可能是因为我错过了一些非常简单的东西,但我觉得我正在敲打着一堵砖墙。感谢。

1 个答案:

答案 0 :(得分:2)

这是一个jsfiddle链接,我认为它可以做你想做的事。

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

你的设置问题是包裹div最小高度(100%)将始终是它的父亲的高度100%,这是身体,它始终只是视口大小。

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

我可能已经留下了一些在浮动设置中不重要的样式,我相信你可以自己选择它们:)