内容 div 覆盖全宽图像而不是被下推答案

【问题标题】：Content div overlays full width image instead of being pushed down内容 div 覆盖全宽图像而不是被下推
【发布时间】：2015-04-27 02:54:35
【问题描述】：

我有一张全幅图片：

.image {
    background-image: url(http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2014/06/wallpaper_51.jpg);
    background-position: center center;
    background-repeat:  !important; 
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-color: #2b6c72;
}

在此之上，我有一个隐藏菜单，由按钮（右上角）触发。当菜单打开时，它会向下推全幅图像。

在全幅图像下方，我有一个绿色内容区域。当隐藏菜单打开时，内容区域会覆盖全幅图像，而不是被下推。

#content-wrapper {
    top: 100%;
    position: absolute;
    width: 100%;
    max-width: 1280px;
    height: 400px;
    background: #3C9;
    margin: 0px auto;
    left: 0;
    right: 0;   
}

问题 - 当我的菜单打开时，如何让内容区域被下推而不是覆盖图像？

您可以在fiddle 中看到它的实际效果

【问题讨论】：

绿色区域随着您小提琴中的图像被推下。至少它在 Mozilla 中。
我正在使用 Firefox，但它没有在我的浏览器中被按下。它覆盖了全幅图像
我不得不让窗户变宽。我现在看到了。
好的。你有没有遇到过类似的问题？
我可以看到您的问题。我将通过使用position:static 使所有元素成为标准block 元素来解决它。给空的.image div 一个合适的高度，例如600px;然后在 nav 上使用 jquery slideToggle()。如果固定高度不够好，您可能需要动态解析 div 高度。

标签： jquery html css fullscreen

【解决方案1】：

我想我自己找到了解决方案。

我将.image 和#content-wrapper 包装在一个绝对定位的新div 中，并将其宽度和高度设置为100%。

#wrapper {
    position:absolute;
    width: 100%;
    height: 100%;
}

现在看来，它正在按预期运行 - 当菜单打开时，它会将所有内容向下推送。

见小提琴：https://jsfiddle.net/5bfvq5Lp/2/

如果您遇到其他事情，请告诉我。

【讨论】：

享受“回答您自己的问题”的好处，只需打几分即可...积分就是奖品。