无论窗口大小如何，Div中的内容都占用相同的空间量？

Question

目前我的网站全屏显示：

然而，当我调整窗口大小时，底部有很多空白区域：

如何使内容占用相同的空间而不管窗口大小？

＆＃13;

＆＃13;

#BG1 {
  background: url("../img/IMG_3708.jpg");
  background-size: cover;
}
.BG1C {
  background-color: rgba(103, 128, 159, 0.79);
}
#slide1 {
  height: 600px;
  max-height: 600px;
  width: 100%;
  margin: 0;
  padding: 200px 0% 260px 0%;
  position: relative;
  top: -100px;
}
#NZi2 {
  width: 36%;
  height: 70%;
  position: relative;
  left: 50%;
}
#map {
  position: absolute;
}
#Rakiura {
  position: absolute;
  top: 82%;
  left: 64%;
  font-size: 2vw;
}
#Tongariro {
  font-size: 2vw;
  position: absolute;
  top: 14%;
  left: 86%
}
#Milford {
  font-size: 2vw;
  position: absolute;
  top: 40%;
  left: 58%;
}
#CYR {
  color: white;
  font-family: 'Merriweather Sans', sans-serif;
  font-size: 7.5vw;
  position: absolute;
  top: 6%;
  left: 15%;
}

＆＃13;

<div id="BG1">
  <div class="BG1C">
    <div id="slide1">
      <div id="map">
        <img src="img/NZ6.png" id="NZi2">
        <a href="#slide2" id="Tongariro" title="Sample Text">Tongariro</a>
        <h1 id="Rakiura">Rakiura</h1>
        <h1 id="Milford">Milford</h1>
        <h1 id="CYR">Choose<br> Your<br>Route.<br></h1>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;