css - 视口(viewport)高度不适用于第一页加载

Question

我希望我的着陆页顶部有一张图片，该图片会被 100% 拉伸(stretch)。如果我向下滚动，我应该会看到登录页面的其余部分。

我正在使用 WordPress。在着陆页的开头，我将此 DIV 标记放在其余着陆页内容之前:

<div id="top_image_div"></div>

这是这个 DIV 的 CSS:

#top_image_div{
    width:100%;
  background: url(http://localhost/webaddress/wp-content/uploads/2015/09/zzzzzzzzzzzz.jpg) no-repeat center center; 
  padding:0;
  height:100vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我认为这个 vh(垂直高度)可能是个问题..

页面有时加载，有时根本不加载。或者，首先显示剩余内容，没有顶部图像。刷新后，显示顶部图像。

有其他替代方案吗？如何使顶部部分成为完整的宽度和高度？请怜悯，我只是一个初学者。

提前致谢。

Answer 1

这是我使用的并且每次都有效:

#top_image_div {
  position: absolute;
  background: url(http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg) no-repeat center center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  min-height: 100vh;
  min-width: 100vw;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
  z-index: -1;
}
.someContainer {
  padding: 10px;
  background-color: rgba(255, 255, 255, .42);
}

<div id="top_image_div"></div>
<div class="someContainer">
  Some Content here
</div>

你也可以在一个 position:relative 容器中执行它，它只会填满那个容器。

例如:

<div class="top-area">
<div id="top_image_div"></div>
</div>
<div class="someContainer">
  Some Content here
</div>

#top_image_div {
  position: absolute;
  background: url(http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg) no-repeat center center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  min-height: 100%;
  min-width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
  z-index: -1;
}
.top-area {
  min-height: 100vh;
  position: relative;
  padding: 0;
  margin: 0;
  color: black;
  padding: 15px;
}
.top-area > .header-overlay {
  background-color: rgba(0, 0, 0, .35);
  color: white;
  padding: 15px
}
body {
  margin: 0;
}
.someContainer {
  padding: 50px 20px;
  min-height; 200px;
}

<div class="top-area">
  <div id="top_image_div"></div>
  <div class="header-overlay">Scroll down!</div>
</div>
<div class="someContainer">
  Some Content here
</div>