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从屏幕底部100px。帮我解决这个问题!!!

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

演示

＆＃13;

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

＆＃13;

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

＆＃13;

网站div与绝对位置消失

2 个答案: