网站 div 以绝对位置消失

Question

HTML：

<div class="site_wrapper">
    <div class="top_wrapper">
        <div class="top_bar_wrapper">
            <div class="nav_bar_wrapper">
                <ul>
                    <a href="#"><li>About Me</li></a>
                    <a href="#"><li>Work</li></a>
                    <a href="#"><li>Clients</li></a>
                    <a href="#"><li>Contact</li></a>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS：

body{
     margin:0;
     padding:0;
     font-weight: 100;
     background-image: url(images/bg2.jpg);
    }
.top_wrapper{
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 100px;
    }

所以当我这样做时，它会将其他 div 推到屏幕之外，我希望我的导航栏在图像上，但我总是希望 img 距离屏幕底部 100 像素。帮我解决这个问题！！！

Answer 1

由于您以百分比形式给出高度，因此这适用于较旧的 IE。但不是在最新的浏览器中。要使其工作，您需要在其父 div 中定义固定高度。要解决您的问题，您可以使用：

html,body{
   height: 100%;
}

Answer 2

嗨，现在尝试以这种方式添加此 css 并删除 width 100% height 100%

.top_wrapper{
    left:0;right:0;top:0;
    bottom: 100px;
    }

演示

body{
     margin:0;
     padding:0;
     font-weight: 100;
     background-image: url(images/bg2.jpg);
  background-color:red;
    }
.top_wrapper{
    background:green url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left:0;right:0;top:0;
  
    position: absolute;
    bottom: 100px;
    }

<div class="site_wrapper">
    <div class="top_wrapper">
        <div class="top_bar_wrapper">
            <div class="nav_bar_wrapper">
                <ul>
                    <a href="#"><li>About Me</li></a>
                    <a href="#"><li>Work</li></a>
                    <a href="#"><li>Clients</li></a>
                    <a href="#"><li>Contact</li></a>
                </ul>
            </div>
        </div>
    </div>
</div>