如何使容器内的元素响应？

Question

我有一个容器，其中我有背景图像，我希望图像是视口的100％。这有效great但是当我重新启动浏览器时，容器的元素将会流出，就像我向下滚动时所看到的那样：

我试过给父元素提供背景图片来解决这个问题，但它也没有用。这可能吗？

HTML：

<section id="header">
            <div class="container-fluid landing-page">
                <div class="row logo">
                    <div class="col-12">
                        <img src="img/logoblack.png">
                    </div>               
                </div>

                <div class="row intro">
                    <div class="col-12">
                        <h6>Hello I'm</h6>
                        <h2>Temple Naylor</h2>
                        <h4>Website / App Developer</h4>
                    </div>            
                </div>

                <div class="row lets-talk">
                    <div class="col-12">
                        <button type="button" class="btn btn-primary">Let's Talk</button>
                    </div>         
                </div>



            </div>
        </section>

CSS：

/* -------------------------------------
HEADER
--------------------------------------*/

#header {
  /* Location of the image */
  background-image: url(/img/header-min.jpg);

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;

  /* Background image doesn't tile */
  background-repeat: no-repeat;

  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;

    height: 100vh;
}

.landing-page {
    text-align: center;
    color: black;
    text-transform: uppercase;
    font-weight: 200;
    background-size: 100%;
}

.logo {
    padding-top: 5%;
}

.intro h6{
    padding-top: 5%;
    font-size: 250%;
}

.intro h2{
    padding-top: 1%;
    font-size: 400%;
}

.intro h4{
    padding-top: 1%;
    font-size: 200%;
}

.lets-talk {
    padding-top: 5%;
    padding-bottom: 5%;
}


.second {
    text-align: center;
}

Answer 1

疯狂的微小修复，但将height: 100vh;更改为min-height: 100vh;似乎可以对其进行排序：）

/* -------------------------------------
HEADER
--------------------------------------*/

#header {
  /* Location of the image */
  background-image: url(/img/header-min.jpg);
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;
  min-height: 100vh;
}
.landing-page {
  text-align: center;
  color: black;
  text-transform: uppercase;
  font-weight: 200;
  background-size: 100%;
}
.logo {
  padding-top: 5%;
}
.intro h6 {
  padding-top: 5%;
  font-size: 250%;
}
.intro h2 {
  padding-top: 1%;
  font-size: 400%;
}
.intro h4 {
  padding-top: 1%;
  font-size: 200%;
}
.lets-talk {
  padding-top: 5%;
  padding-bottom: 5%;
}
.second {
  text-align: center;
}

<section id="header">
  <div class="container-fluid landing-page">
    <div class="row logo">
      <div class="col-12">
        <img src="img/logoblack.png">
      </div>
    </div>

    <div class="row intro">
      <div class="col-12">
        <h6>Hello I'm</h6>
        <h2>Temple Naylor</h2>
        <h4>Website / App Developer</h4>
      </div>
    </div>

    <div class="row lets-talk">
      <div class="col-12">
        <button type="button" class="btn btn-primary">Let's Talk</button>
      </div>
    </div>
  </div>
</section>